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

Popular posts from this blog

account - Script error login visual studio DefaultLogin_PCore.js -

xcode - CocoaPod Storyboard error: -