Recently, I delved into the world of Google charts and was amazed by its capabilities. However, I encountered a hurdle when trying to integrate data from a SQL server view. To tackle this issue, I initiated a sample project to facilitate the process but have been struggling to get it functional. Below is my code snippet:
<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>
Although I am able to retrieve the correct JSON data string, I am facing issues when feeding this data into the DataTable() class as it does not display any data on the chart. I even attempted using data.AddRows(jsonData) but without success. It seems that Google requires a specific format for the data structure, like the one shown below:
{"cols":[{"id":"Col1","label":"","type":"date"}],
"rows":[
{"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
{"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
]
}
I am looking for a way to transform my jsonData into the aforementioned structured format or something more adaptable. The existing chart examples are limited to static data, whereas I need real-time database integration. Any assistance would be greatly appreciated.