How do I pass django context variables into javascript? - javascript

I'm using highcharts and it requires me to pass into it variables such as this
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
How would I pass this into my javascript?

You can generate the data structure in Python, and then pass it to your script as a JSON object. You need to use a library like django-argonauts to do this safely.
In your view:
data = {
'series': [
'name': 'Brands',
'colorByPoint': true,
# etc...
]
}
Pass this as a context variable to your template.
Then, in the template:
{% load argonauts %}
<script>
(function () {
var data = {{ data|json }};
// do something with data
})();
</script>
Where |json is a template filter provided by the Argonauts library, which will handle properly escaping all the data for you.

Related

Assigning data structures to chartjs properties, NOT individually

Given the following code from chartjs' website [at bottom ( http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#10-bubble-chart) ], one must assign each data point individually, which also takes up lots of space. Say I have all the x's, y's and r's in a list. This is a kind of open ended question and not looking for a restricted solution. How would I implement something like the pseudo code below?
labelList=['China','Denmark','Germany','Japan']
xlist= [21269017,258702, 3979083,4931877]
ylist = [5.245,7.526,6.994,5.921]
rlist = [15,10,15,15]
datasets: [
{
label: labelList,
data: [{
x: xlist,
y: ylist,
r: rlist
}]
}
INSTEAD OF:
new Chart(document.getElementById("bubble-chart"), {
type: 'bubble',
data: {
datasets: [
{
label: ["China"],
data: [{
x: 21269017,
y: 5.245,
r: 15
}]
}, {
label: ["Denmark"],
data: [{
x: 258702,
y: 7.526,
r: 10
}]
}, {
label: ["Germany"],
data: [{
x: 3979083,
y: 6.994,
r: 15
}]
}, {
label: ["Japan"],
data: [{
x: 4931877,
y: 5.921,
r: 15
}]
}
]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "Happiness"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "GDP (PPP)"
}
}]
}
}
});
First you need to check if the xList, yList, rList and labelList have the same length otherwise obviously we can't do this.
After that, we can generate the necessary data structure using a simple code like below:
labelList = ['China', 'Denmark', 'Germany', 'Japan']
xList = [21269017, 258702, 3979083, 4931877]
yList = [5.245, 7.526, 6.994, 5.921]
rList = [15, 10, 15, 15]
if ([labelList.length, xList.length, yList.length, rList.length].every((v, i, arr) => v == arr[0])) {
datasets = [...Array(labelList.length).keys()].map(i => ({
label: labelList[i],
data: [{
x: xList[i],
y: yList[i],
r: rList[i]
}]
}))
console.log(datasets);
}

Angular : SetData to HighChart widget from an array object

i'm using under my ANgular component a highchart widget :
DEMO OF THE CHART : https://www.highcharts.com/demo/pie-legend
from the documentation , using it is like that :
Highcharts.chart('divChart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: this.nb
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
But since am loading dynamically the datat ( chrome , firefox ...) ,
i have now a set fo key/ value data indicationg each browser with its value :
browsers: {[key: string ]: number } = {};
for example my browsers list contains :
chrome (name) -> 60 (value)
firefox -> 30
edge -> 10
....
i wanna inject my browsers list values dynamically to the data of the chart , and not mannually , since my list may contain numerous values.
i think there were some methode called setData , but i don't know if it's usefull.
Ideas ?
Yes there is setData function
http://api.highcharts.com/highcharts/Series.setData
but after you need to update chart http://api.highcharts.com/highcharts/Series.update

Update specific slice of pie chart

My highcharts pie data is as follows:
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
I know I could update the y value of the first slice by doing:
var chart = $('#pie_chart').highcharts();
chart.series[0].data[0].update(100);
Or I could change all the data by using json:
chart.series[0].setData(json);
But how do I change the value for a specific slice based on it's name. For example, how do I change the y value for the Firefox slice if I don't know what order the slices are in (ie: I need to reference it by name)?
You may iterate over data to find the appropriate index.
var series = [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
var i;
var idxFound = -1;
for (i = 0; i < series[0].data.length; i++) {
if (series[0].data[i].name === 'Firefox') {
idxFound = i;
break;
}
}
if (idxFound !== -1) {
series[0].data[idxFound].y = 9;
console.log(series[0].data[idxFound]); // { name: 'Firefox', y: 9 }
}
If jQuery is your thing, you can try the following, to have a newArray to store you user-agent name with the same index. Then you can look up in the newArray afterwards:
var newArray = $.map(series[0].data, function (obj, i) { return obj.name; });
var i = newArray.indexOf('Firefox');
series[0].data[i].y = 9;
console.log(series[0].data[i]); // Object { name="Firefox", y=9}
But it can be easily done without jQuery to make a newArray.

Chart angularJs

I have some trouble integrating my data json to a chart i tried highlight chart , nvd3 ,google chart i have data comming out of http get :
$http.get("/get")
.success(function(data){
$scope.produit=data;
});
the result of this is
$scope.produit = [
{
id: 15,
nom: "azerty",
type: "azerty",
quantity: 456,
prix: 25296
},
{
id: 21,
nom: "sdqs",
type: "qsdqsd",
quantity: 102,
prix: 52
}
];
i want to view quantity and type in chart i tried to put type and quantity in seprate tables then when i try to use for (i=0;i>$scope.produit.lenght;i++) it won't work because am putting the for inside the data structure of the chart here's an exemple of data structure
$scope.pieData = [{
name: type[0],
quantity[0]
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
Thank you !

Highcharts access drilldown data from event click

I am trying to display the drilldown series pie chart data on click. I'm able to display the pie chart series name the user clicks on but not the drill down data.
Here is an example:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
events:{
click: function (event) {
alert(event.point.name)
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
['v11.0', 24.13],
['v8.0', 17.2],
['v9.0', 8.11],
['v10.0', 5.33],
['v6.0', 1.06],
['v7.0', 0.5]
]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0', 5],
['v41.0', 4.32],
['v42.0', 3.68],
['v39.0', 2.96],
['v36.0', 2.53],
['v43.0', 1.45],
['v31.0', 1.24],
['v35.0', 0.85],
['v38.0', 0.6],
['v32.0', 0.55],
['v37.0', 0.38],
['v33.0', 0.19],
['v34.0', 0.14],
['v30.0', 0.14]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
['v35', 2.76],
['v36', 2.32],
['v37', 2.31],
['v34', 1.27],
['v38', 1.02],
['v31', 0.33],
['v33', 0.22],
['v32', 0.15]
]
}, {
name: 'Safari',
id: 'Safari',
data: [
['v8.0', 2.56],
['v7.1', 0.77],
['v5.1', 0.42],
['v5.0', 0.3],
['v6.1', 0.29],
['v7.0', 0.26],
['v6.2', 0.17]
]
}, {
name: 'Opera',
id: 'Opera',
data: [
['v12.x', 0.34],
['v28', 0.24],
['v27', 0.17],
['v29', 0.16]
]
}]
}
});
});
Instead of alert(event.point.name) I want to access the drilldown series data corresponding to the id the user clicks on.
Using the console.log I thought this would work (this.chart.series[0].data[0]) but it displays the series data and not the drilldown.
You are missing drilldown.js which is needed to drilldown the pie.
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
See the Working fiddle here
This is the answer:
this.chart.options.drilldown.series[0].data[0]

Categories