Google Visualization API Charts

If you’re a newbie to the Google Visualization API (a.k.a. Google Charts) as I was a few months ago you might find that you need some conceptual things to understand. Here is a small list that you might find useful.

Know and understand the basics of the JavaScript language.
JavaScript is the language in which we generate the graphs. In order to know how to use the API, you must know the basics of this language.
Know what is JSON (json.org)
JSON (JavaScript Object Notation) is the way we define objects and their properties. Here we use this to define properties.
References and Help!!!!
You can get all the help you need at the Google Visualization API website at: http://code.google.com/apis/chart/
All other information you might need you can find on the “Google Visualization API group” at: http://groups.google.com/group/google-visualization-api

Creating you first chart

First of all create a reference to the Google Visualization API JavaScript library by adding this line to your HTML header: <script type="text/javascript" src="https://www.google.com/jsapi"></script>
After loading this library, you can access the “google” object (pay attention that this object is all lower case). You can load packages, generate object instances etc.

The simplest way to describe it is by example. Here is a simple 3D Pie Chart (as taken from the API samples)

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);
        data.setValue(2, 0, 'Commute');
        data.setValue(2, 1, 2);
        data.setValue(3, 0, 'Watch TV');
        data.setValue(3, 1, 2);
        data.setValue(4, 0, 'Sleep');
        data.setValue(4, 1, 7);
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {
                             width: 450,
                             height: 300,
                             is3D: true,
                             title: 'My Daily Activities'
        });
      }
    </script>
</head>
<body>
    <div id="chart_div"></div>
</body>
</html>

What are packages
Packages are, as you might think, an array of packages you intend to use, and thus request to load into the browser memory. The most common package is the “corechart”, others are: “table”, “geomap”, “geochart”, “annotatedtimeline”, “motionchart”, “orgchart”, “treemap” and “charteditor”

The Google DataTable and DataView
The data table object is a holder of data in the form of table (similar to any table format you can think of). It has columns and rows. You can create this object in several ways.

Creating an empty data table and filling it. Similar to the previous example

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', {v:7, f:'7.000'}]
]);

In this sample we create a table with 2 columns and populating it using the “addRows” method. In the previous example we first allocated 5 rows and then set their values.

Creating a datable and populating it during the creation stage (in the constructor)

var dt = new google.visualization.DataTable(
     {
       cols: [{id: 'task', label: 'Task', type: 'string'},
                {id: 'hours', label: 'Hours per Day', type: 'number'}],
       rows: [{c:[{v: 'Work'}, {v: 11}]},
              {c:[{v: 'Eat'}, {v: 2}]},
              {c:[{v: 'Commute'}, {v: 2}]},
              {c:[{v: 'Watch TV'}, {v:2}]},
              {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
             ]
     },
   0.6
);

Methods, events, listeners and triggers
All of the mentioned above are supported by this API. You can listen to events, such as “select”, “onmouseover” etc. Each graph element has a set of methods and events that you can use for your application purposes.

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
alert('A table row was selected');
}

In this example we created a table using the Table control, populated it and attached a “select” listener to its rows. Whenever a row was selected (clicked) the “selectHandler” function was called.
Similar to this, you can catch mouse movements, maps region selection (“regionClick” event in the GeoChart), pie slices selections, column bar selections and much more.

The “Playground”
Every graph you want to try before you generate your own code you can try on the “API Playground” at: http://code.google.com/apis/ajax/playground/?type=visualization
Here you can select every graph type you desire, modify and debug them.
Limitations:
Although it’s created by Google, we have limitations for using the graphs. Most of them are due to the fact that all graphs are generated on the user’s browser (the client) and thus limited by the browser type, computer CPU and memory. From my experience, before trying to populate large amount of data and “believing” the API will do the trick, think and generate only what you need.

References:

thenez101 - a blog about nothing and everything

Tuesday, July 19, 2011