Post
Ask Question

Pie Charts Using Google Charts

Recently, I got a chance to use Google charts. The scenario was to implement Pie charts with the monthly data comparison. I had some other options like D3.js, chartjs, chartlistjs, smoothie charts etc.

Google charts are more flexible. Charts are rendered, using HTML5/SVG to provide the Cross-Browser compatibility and cross platform portability. It also includes VML for supporting older IE versions. No extra plugin is required to handle the different Browser support.

Google charts API contains a vast range of charts like Geo chart, Scatter chart, Column chart, Histogram, Bar chart, Combo chart, Area chart, Pie chart, Donut chart, Gauge etc.

Here, I would like to show some basic implementation of Google Pie chart.

  1. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
  2. <script type="text/javascript">  
  3.     google.charts.load('current', {  
  4.         'packages': ['corechart']  
  5.     });  
  6.     google.charts.setOnLoadCallback(drawChart);  
  7.   
  8.     function drawChart() {  
  9.         var data = google.visualization.arrayToDataTable([  
  10.             ['Task', 'Hours per Day'],  
  11.             ['Task 1', 112],  
  12.             ['Task 2', 200],  
  13.             ['Task 3', 500],  
  14.             ['Task 4', 100],  
  15.             ['Task 5', 250]  
  16.         ]);  
  17.         var options = {  
  18.             title: 'Test chart'  
  19.         };  
  20.         var chart = new google.visualization.PieChart(document.getElementById('viewchart'));  
  21.         chart.draw(data, options);  
  22.     }  
  23. </script>  
  24. <div id="viewchart" style="margin-top:6px;width: 540px; height: 450px;"></div>  
Following steps needs to be performed for the chart implemention,

 

  1. Add the reference to JavaScript.
  2. We need to load corechart package along with Visualization API.
  3. setOnLoadCallback is a call back function, which will be called, when Google Visualization is loaded.
  4. drawChart function is responsible for generating the data and rendering  PieChart.

Result of the code, given above is:
chart
We can do customization on this chart like color change of the pie pieces by adding a code in the options variable:

  1. var options =  
  2.     {  
  3.     title: 'Test Chart',  
  4.     colors: ['#3A8FAB', '#AB563A', '#56AB3A', '#9C61B8', '#61B88F']  
  5. };  
chart

Google charts provides an extreme level of customization. Moreover, this API doesn’t require any paid license. It supports modern as well as old Browsers like IE8.