javascript - Generated Google Chart Page not working -
i'm using codeigniter generate page google chart data mysql database. page isn't displayed (no chart @ all). don't know part of generated code wrong. generated code this:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setonloadcallback(drawchart); // create our data table out of json data loaded server. var data = new google.visualization.datatable(); data.addcolumn('number', 'time'); data.addcolumn('number', 'va'); data.addcolumn('number', 'vb'); data.addcolumn('number', 'vc'); //var d = new date(); data.addrow([1400230864720,9192114,9194641,9190145]); data.addrow([1400230864740,9191693,9194641,9189443]); data.addrow([1400230864760,9191694,9198856,9189444]); data.addrow([1400230864780,9190147,9193520,9189867]); data.addrow([1400230864800,9188180,9197449,9190146]); data.addrow([1400230864820,9189444,9196889,9190567]); data.addrow([1400230864840,9188461,9196186,9188740]); data.addrow([1400230864860,9190990,9199556,9188460]); data.addrow([1400230864880,9189867,9193518,9188600]); data.addrow([1400230864900,9189303,9198855,9187899]); var options = { title: 'phasor' }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data,options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
you missing function call below google.setonloadcallback(drawchart);
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setonloadcallback(drawchart); function drawchart() { // create our data table out of json data loaded server. var data = new google.visualization.datatable(); data.addcolumn('number', 'time'); data.addcolumn('number', 'va'); data.addcolumn('number', 'vb'); data.addcolumn('number', 'vc'); //var d = new date(); data.addrow([1400230864720,9192114,9194641,9190145]); data.addrow([1400230864740,9191693,9194641,9189443]); data.addrow([1400230864760,9191694,9198856,9189444]); data.addrow([1400230864780,9190147,9193520,9189867]); data.addrow([1400230864800,9188180,9197449,9190146]); data.addrow([1400230864820,9189444,9196889,9190567]); data.addrow([1400230864840,9188461,9196186,9188740]); data.addrow([1400230864860,9190990,9199556,9188460]); data.addrow([1400230864880,9189867,9193518,9188600]); data.addrow([1400230864900,9189303,9198855,9187899]); var options = { title: 'phasor' }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data,options); } // closing tag function </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Comments
Post a Comment