populating a DataTable with a JSON file directly, or querying a local spreadsheet (google visualization) -


i looking easiest way populate data table in google visualizations using either json file or local spreadsheet(.xlsx).

heres code:

    <!doctype html> <html>   <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 , piechart package.     google.load('visualization', '1', {'packages':['corechart']});      // set callback run when google visualization api loaded.     google.setonloadcallback(drawchart);      function drawchart() {        var data = new google.visualization.datatable.fromjson(sampledata.json,0.6);        // instantiate , draw our chart, passing in options.       var chart = new google.visualization.piechart(document.getelementbyid('chart_div'));       chart.draw(data, {width: 400, height: 240});     }      </script>   </head>    <body>     <!--div hold pie chart-->     <div id="chart_div"></div>   </body> </html>

heres json file:

    {   "cols": [         {"id":"","label":"topping","pattern":"","type":"string"},         {"id":"","label":"slices","pattern":"","type":"number"}       ],   "rows": [         {"c":[{"v":"mushrooms","f":null},{"v":3,"f":null}]},         {"c":[{"v":"onions","f":null},{"v":1,"f":null}]},         {"c":[{"v":"olives","f":null},{"v":1,"f":null}]},         {"c":[{"v":"zucchini","f":null},{"v":1,"f":null}]},         {"c":[{"v":"pepperoni","f":null},{"v":2,"f":null}]}       ]      }

when run code in browser, "uncaught referenceerror: sampledata not defined"

anyone know how can make work?

thanks in advance

you place contents of json file right inline there in html string "sampledata.json" is. is, take out "sampledata.json" , replace entire contents of json file. i'm pretty sure you'll make progress if this.


Comments

Post a Comment