Load Google Chart by Ajax using Asp.net MVC and jQuery

If you are looking for a modern chart tool in a modern browser, you must not not to know the free one that offer by Google – Google Chart, is a HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions) and cross platform portability to iPhones, iPads and Android. No plugins are needed. Don’t get confused by the image chart offered by Google, which was another chart tool. Now the new HTML5 Google chart provides more interaction and better rendering to users . I found it’s very easy to use Google chart with Asp.Net MVC. Especially, the View allow you to control the way you want the html being rendered. Compares to the Asp.net chart tool offered by Microsfot which works the best with original asp.net web form . is also workable with Asp.net MVC. However, the Google offer an elegant and modern way to render a chart for web application. In this tutorial, it demonstrates how to load the data to Google chart dynamically(ajax) using jquery instead of from render data on the page itself. In the javascript below, it calls /googlechart/getPieChartData to get the data in json format and then add each element of json into the Google’s DataTable. Therefore, the view only contains the html, javascript and some static content such as header column label and the name of the chart. And the ajax call from jquery does the job retrieving data from server side. You may ask, what’s benefit of doing in this way compares to the traditional image chart. It’s more dynamic (because of HTML5), it provides better user experience by reducing the load time (less html to browser) or by show a loading image before Google chart is fully loaded.

<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">// <![CDATA[ google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart);   function drawChart() {   $.post('/googlechart/getPieChartData', {}, function (data) { var tdata = new google.visualization.DataTable();   tdata.addColumn('string', 'Country'); tdata.addColumn('number', 'Population');   for (var i = 0; i < data.length; i++) { tdata.addRow([data[i].Name, data[i].Value]); }   var options = { title: "Top 5 Country's Population" };   var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(tdata, options); });   } // ]]></script>

On the server side, create a action that return data in Json format with Name and Value fields.

1 2 3 4 5 6 7 8 9 10 11

public JsonResult GetPieChartData() {   var data = new[] { new { Name = "China", Value = 1336718015 }, new { Name = "India", Value = 1189172906 }, new { Name = "United States", Value = 313232044 }, new { Name = "Indonesia", Value = 245613043 }, new { Name = "Brazil", Value = 203429773 },};   return Json(data); }