Create dynamic pie charts using dynamic json data

Question

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>