lundi 29 juin 2015

How can I declare a variable for each object in the JSON file?


I'm new to Javascript. I hope you guys don't mind is my code is a little unorganized.

I have a data.json file that contain 4 objects : a , b , c , d.


Manually

I declared my variables manually.

var chart_a = new google.visualization.PieChart(document.getElementById('sa-piechart-a'));
var chart_b = new google.visualization.PieChart(document.getElementById('sa-piechart-b'));
var chart_c = new google.visualization.PieChart(document.getElementById('sa-piechart-c'));
var chart_d = new google.visualization.PieChart(document.getElementById('sa-piechart-d'));  


Dynamically

Now, I want to make it dynamically so it can handle all the objects in my JSON file, and it doesn't break - when I add more objects to my JSON file.

So while in the loop, I tried add :

chart[object] = new google.visualization.PieChart(document.getElementById('sa-piechart-'+ data[object] )); // <---- I try to add this line


I got my objects from Ajax call.

var data = {};
var chart = {};

for (var object in objects) {

  var total = objects[object].danger + objects[object].warning + objects[object].success ;


  data[object] = google.visualization.arrayToDataTable([

    ['Piechart' , 'Number of Skills'],
    ['danger'   , ( objects[object].danger/total )  * 100  ],
    ['warning'  , ( objects[object].warning/total ) * 100  ],
    ['success'  , ( objects[object].success/total ) * 100  ],

    ]);

   chart[object] = new google.visualization.PieChart(document.getElementById('sa-piechart-'+ data[object] )); // <---- I try to add this line

}

// var chart_a = new google.visualization.PieChart(document.getElementById('sa-piechart-a'));
// var chart_b = new google.visualization.PieChart(document.getElementById('sa-piechart-b'));
// var chart_c = new google.visualization.PieChart(document.getElementById('sa-piechart-c'));
// var chart_d = new google.visualization.PieChart(document.getElementById('sa-piechart-d'));


Result

I keep getting Uncaught Error: Container is not defined

Any hints / suggestions will be much appreciated !


Aucun commentaire:

Enregistrer un commentaire