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