javascript - 'undefined is not a function' with google charts when using JSON -
i have json data , wanted try out google charts. used examples documentation here , here
<head> <!--load ajax api--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> // load visualization api google.load("visualization", "1", {packages:["corechart"]}); // set callback run when google visualization api loaded. google.setonloadcallback(drawchart); function drawchart() { var jsondata = $.ajax({ url: "get-stats.php", datatype:"json", async: false }).responsetext; var options = { title: 'stats' }; // create our data table out of json data loaded server. var data = new google.visualization.datatable(jsondata); // instantiate , draw our chart, passing in options. var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data, options); } </script> </head> <body> <!--div hold chart--> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> when chart.draw() gets called, error "undefined not function" appears on site.
my json file gets loaded (get-stats.php)
<?php $string = file_get_contents("stats.json"); echo $string; ?> the json formatted that:
{ "cols": [ { "id": "date", "label": "date", "type": "datetime" }, { "id": "cntall", "label": "total", "type": "number" }, { "id": "cntpers", "label": "pers", "type": "number" } ], "rows": [ { "c": [ { "v": "new date(2013, 11, 17, 9, 54, 0)" }, { "v": 320 }, { "v": 123 } ] }, { "c": [ { "v": "new date(2013, 11, 17, 11, 4, 0)" }, { "v": 300 }, { "v": 67 } ] } ] } i suspect has json. code google examples.
var data = new google.visualization.datatable($jsondata); try instead
$jsondata => json_encode($jsondata); and put in php tag
Comments
Post a Comment