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 !
Related
var array= [{ name: "LTNS", id: 1, percentage: 60, price: 900000 },
{ name: "NPCS", id: 2, percentage: 30, price: 342000 },
{ name: "MARCOS", id: 3, percentage: 10, price: 600000 }]
Using above array i need build stacked bar chart in angular-highchart and result should be like below.
I am using angular-highchart 7.2.0 version.
I have seen lots reference but nothing is same as above.
I think that you can start from this approach:
var array = [{
name: "LTNS",
id: 1,
percentage: 60,
price: 900000
},
{
name: "NPCS",
id: 2,
percentage: 30,
price: 342000
},
{
name: "MARCOS",
id: 3,
percentage: 10,
price: 600000
}
].reverse();
array.forEach(obj => {
obj.data = [obj.percentage]
})
Highcharts.chart('container', {
chart: {
type: 'bar'
},
plotOptions: {
bar: {
stacking: 'normal',
groupPadding: 0.2
}
},
series: array
});
Demo: https://jsfiddle.net/BlackLabel/d9xrgeka/
If you will face an issue implementing other features, please ask a specific question.
I'm new to High charts. I'm facing an issue while putting the numeric data in the name field, the data is not getting displayed over the chart.
Here's the working demo => Click here
Here's the code =>
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 2011,
value: 6,
colorValue: 1
}, {
name: 2012,
value: 6,
colorValue: 2
}, {
name: 2013,
value: 4,
colorValue: 3
}, {
name: 2014,
value: 3,
colorValue: 4
}, {
name: 2015,
value: 2,
colorValue: 5
}, {
name: 2016,
value: 2,
colorValue: 6
}, {
name: 2017,
value: 1,
colorValue: 7
}]
}],
title: {
text: 'Highcharts Treemap'
}
});
Any help regarding the issue would be appreciated.
The name field is a string so if you want to display a numeric data on the chart you have to convert it into a string.
To do so you can simply add quotes :
name: '2011',
Or you can use the toString() method:
name: numericValue.toString(),
See demo here
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.
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.
I want to know if it will be possible to use the two pane view (as this example) with a stacked area graph ?
I tryed to make it works in a fiddle http://jsfiddle.net/g2xDj/2/, but, the stacked area graph is not displayed.
var stacked_data = [{
name: 'Asia',
data: [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]]
}, {
name: 'Africa',
data: [[1364292000,106], [1364294000,107], [1364296000,111], [1364298000,133], [1364300000,221], [1364302000,767], [1364304000,1766]]
}, {
name: 'Europe',
data: [[1364292000,163], [1364294000,203], [1364296000,276], [1364298000,408], [1364300000,547], [1364302000,729], [1364304000,628]]
}];
var line_data = [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]];
// create the chart
$('#container').highcharts('StockChart',
{
chart : {
//type: 'area',
renderTo : 'container',
zoomType: 'x'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'Load'
},
height: 200,
lineWidth: 2
},
{
title: {
text: 'Load 2'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}
],
series: [
{
name: "area",
data: stacked_data,
yAxis: 0
},{
name: "line",
data: line_data,
yAxis: 1
}]
});
});
Anybody have an idea to help me ?
In your example you have incorrect structure of series, because in stackedArea you try to push "series" structure for data.
Additionaly you should multiply all timestamp by 1000 to achieve JS timestamp format.
Updated example: http://jsfiddle.net/g2xDj/4/
var series = [{
name: 'Asia',
data: [
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]
}, {
name: 'Africa',
data: [
[1364292000000, 106],
[1364294000000, 107],
[1364296000000, 111],
[1364298000000, 133],
[1364300000000, 221],
[1364302000000, 767],
[1364304000000, 1766]
]
}, {
name: 'Europe',
data: [
[1364292000000, 163],
[1364294000000, 203],
[1364296000000, 276],
[1364298000000, 408],
[1364300000000, 547],
[1364302000000, 729],
[1364304000000, 628]
]
}];
var line_data = {
type:'line',
yAxis:1,
data:[
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]};
series.push(line_data);