Create Interactive Charts with Google Chart API

Last post, we have discussed about Create image charts using Google Chart Tool.

Here, we are going talk about how to create interactive charts using Google chart API. Google’s Javascript library allow you to create the charts and throws the events which can be handled by your code.

Interactive charts and diagrams will give the users better usability experience but bit heavy.

Here is the Pie chart created by using the library, mouse hover on the chart to feel interactive effect.

HTML and script for above chart:

<div id="visualization" style="width: 500px; height: 300px;"></div>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
   
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
   
<script type="text/javascript">
   function drawVisualization() {
     // Create and populate the data table.
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Browser');
     data.addColumn('number', 'Votes');
     data.addRows(4); // add no of rows
     data.setValue(0, 0, 'Chrome'); //first row and  first column (name of the browser)
     data.setValue(0, 1, 4000); // first row and second column(votes count)
     data.setValue(1, 0, 'Firefox');
     data.setValue(1, 1, 3000);
     data.setValue(2, 0, 'IE');
     data.setValue(2, 1, 1000);
     data.setValue(3, 0, 'Others');
     data.setValue(3, 1, 1500);
     // Create and draw the visualization.
     new google.visualization.PieChart(document.getElementById('visualization')).
         draw(data, {title:"What is your favorite Browser?"});
   }

   google.setOnLoadCallback(drawVisualization);
 </script>

First, include the Google ajax api

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Load the “corechart” package, package names are different for different chart types.

google.load('visualization', '1', {packages: ['corechart']});


Add a callback function to run when API is loaded.

google.setOnLoadCallback(drawVisualization);

Create the Data Table and column names.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Votes');


Create the data rows and add the values.

data.addRows(4); // add no of rows
data.setValue(0, 0, 'Chrome'); //first row and  first column (name of the browser)
data.setValue(0, 1, 4000); // first row and second column(votes count)

Finally call the Pie Chart draw method to create the chart.

new google.visualization.PieChart(document.getElementById('visualization')).
         draw(data, {title:"What is your favorite Browser?"});

There are lot other interactive charts we can create by using the Chart API. See the whole list of charts and examples here and play with the code here to better understand the API.