StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POConvert normal json data to data that Google Visualization DataTable understands?
text
Body
copied!<p>I just started using Google charts and its really cool stuff. The only problem is that I can not find any good examples for implementing this using data fed from a sql server view. So I created a sample project to facilitate this functionality, hoever i am battling to get it workin. Please find my code below:</p> <pre><code><script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1', { 'packages': ['corechart'] }); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "api/Google", dataType: "json", async: false }).responseText; alert(jsonData); // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); data.addColumn('string', 'Employee'); data.addColumn('number', 'TotalNoOfReports'); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, { width: 400, height: 240 }); } </script> </code></pre> <p>I am getting the correct json data string but when I pass my jsonData into the DataTable() class it return no data for the chart. I have also tried to call data.AddRows(jsonData),but still no luck. Im guessing google does not understand the structure of normal json data and requires it to be in the following format:</p> <pre><code>{"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] } </code></pre> <p>Is there a way I can get my jsonData to look like the structure above, possibly something more generic. The only chart examples are static and at times you would need to read off a database, please assist.</p>

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