javascript - Google charts json error -
i trying create google char using json object. keep getting error when running var data = new google.visualization.datatable(chartdata);
please see code below, appreciated.
var addresses = json.parse('{"with address": 45532627,"without address": 10845793}'); var age = json.parse('{"18-25": 2162586,"26-35": 9995883,"36-45": 9486158,"46-55": 8729677,"56-65": 6913371,"65+": 10545270}'); var cellphone = json.parse('{"with cellphone": 21536203,"without cellphone": 34842217}'); google.charts.load("current", {packages:["corechart"]}); google.charts.setonloadcallback(drawchart(addresses,'addresses')); google.charts.setonloadcallback(drawchart(age,'age')); google.charts.setonloadcallback(drawchart(cellphone,'cellphone')); function drawchart(chartdata,name) { var data = new google.visualization.datatable(chartdata); var options = { title: name, piehole: 0.4, legend: 'left' }; var chart = new google.visualization.piechart(document.getelementbyid(name)); chart.draw(data, options); }
first, setonloadcallback
meant called once, when page loads
also, setonloadcallback
expects reference function
, not result of function
google.charts.setonloadcallback(drawchart);
vs.
google.charts.setonloadcallback(drawchart(addresses,'addresses'));
regardless, callback
can added load
statement
google.charts.load("current", { callback: function () { drawchart(addresses,'addresses'); drawchart(age,'age'); drawchart(cellphone,'cellphone'); }, packages:["corechart"] });
next, in order create datatable
directly json, must in specific format
found here --> format of constructor's javascript literal data parameter
otherwise, can load table manually
see following working snippet...
google.charts.load("current", { callback: function () { var addresses = json.parse('{"with address": 45532627,"without address": 10845793}'); var age = json.parse('{"18-25": 2162586,"26-35": 9995883,"36-45": 9486158,"46-55": 8729677,"56-65": 6913371,"65+": 10545270}'); var cellphone = json.parse('{"with cellphone": 21536203,"without cellphone": 34842217}'); drawchart(addresses,'addresses'); drawchart(age,'age'); drawchart(cellphone,'cellphone'); }, packages:["corechart"] }); function drawchart(chartdata,name) { var data = new google.visualization.datatable(); data.addcolumn('string', 'category'); data.addcolumn('number', 'value'); (var key in chartdata) { if (chartdata.hasownproperty(key)) { data.addrow([ key, chartdata[key] ]); } } var options = { title: name, piehole: 0.4, legend: 'left' }; var chart = new google.visualization.piechart(document.getelementbyid(name)); chart.draw(data, options); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="addresses"></div> <div id="age"></div> <div id="cellphone"></div>
Comments
Post a Comment