StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POdraw google charts with JSON
text
Body
copied!<p>How can I retrieve and use a dataset for google charts if it was a separate JSON file?? I tried jQuery getJSON but couldn't get it worked.. Google Viz should use the JSON to draw a bar chart Is there a native google API way? or can I find a way using jQuery and how? Thanks</p> <pre><code> // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Products'); data.addColumn('number', 'Automated'); data.addRows([ ['Product 1', 85], ['Product 2', 75], ['Product 3', 90], ['Product 4', 40], ['Product 5', 40] ]); // Set chart options var pie_options = {'title':'How Much Automated our Products are?', 'width':520,'height':300 }; var bar_options ={'width': 620, 'height': 300, 'title': 'Products', 'hAxis': {'title': '% Automated', 'titleTextStyle': {'color': 'red', 'fontSize': 16}} } // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('piechart_div')); chart.draw(data, pie_options); var chart = new google.visualization.ColumnChart(document.getElementById('barchart_div')); chart.draw(data, bar_options); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload