1
Reply

Create dynamic pie charts using dynamic json data

Kavya Durgam

Kavya Durgam

Dec 11 2017 8:46 AM
166
Is it possible to create the dynamic pie charts based on dynamic json array.I need to create the 3 pie charts using this json data.In Future the json data should have 4 arrays of data so it should create 4 pie charts.
Below is the json array I have =
Var NutrientReportData= [
[
{
"Nutrient_Id": 20,
"value": "Alanine_g",
"item": 6.917783
},
{
"Nutrient_Id": 188,
"value": "Alpha Tocopherol equivalent_mg",
"item": 0.114346
},
{
"Nutrient_Id": 180,
"value": "Alpha Tocopherols_mg",
"item": 0.077257
},
{
"Nutrient_Id": 184,
"value": "Alpha Tocotrienols_mg",
"item": 0.062998
}],[{
"Nutrient_Id": 131,
"value": "Alpha-linolenic acid (18:3;n-3) - mg_mg",
"item": 8.930179
},
{
"Nutrient_Id": 214,
"value": "Aluminium (Al)_mg",
"item": 0.248001
},
{
"Nutrient_Id": 96,
"value": "Arachidic (20:00) -mg_mg",
"item": 1.650828
}],[{
"Nutrient_Id": 21,
"value": "Arginine_g",
"item": 9.842758
},
{
"Nutrient_Id": 6,
"value": "Ash_g",
"item": 0.805348
},
{
"Nutrient_Id": 22,
"value": "Aspartic acid_g",
"item": 10.509094
}]];
THIS IS THE CODE for loooping the array data based on length of the json data.
for (i=0;i<NutrientReportData.length; i++)
{
var data2 = NutrientReportData[i];
var series2 = new Array();
for (var j in data2) {
var serie2 = new Array(data2[j].value, data2[j].item);
series2.push(serie2);
}
if (series2.length !== 0)
{
DrawPieChart5(series2);
}
}
THIS IS THE FUNCTION I AM USING TO CREATE static PIECHART with dynamic data it will create only a single pie chart
function DrawPieChart5(series2) {
var chart = new Highcharts.Chart({
colors: ["#ff4444", "#ffbb33", "#00C851", "#33b5e5", "#2BBBAD", "#4285F4", "#aa66cc", "#CC0000", "#FF8800", "#007E33", "#0099CC", "#00695c", "#0d47a1", "#9933CC", "#2E2E2E", "#3F729B", "#4B515D", "#ef5350", "#37474F", "#ec407", "#ab47bc", "#212121", "#b71c1c", "#4a148c", "#880e4f", "#4527a0", "#76ff03", "#ff9800", "#eeff41", "#69f0ae", "#e64a19"],
chart: {
type: 'column',
renderTo: 'container2'
},
title: {
text: 'Nutrients consumed by urban population'
},
tooltip: {
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:1f}'
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Nutrient_Desc',
data: series2
}]
});
}
//this is the html code i used to print the pie chart
<div class="mdrf-admin-dashboard">
<div ng-show="showPieChart5" style="min-width: 1000px; height: 1000px; max-width: 2000px;" id="container2"></div>
</div>

Answers (1)