Short Introduction to the Google Visualization API
Visualizing data often requires server-side programming, perhaps generating images of graphs, pie charts or bar charts. Depending on the type of visualization, this can make it expensive and time consuming. The Google Visualization API is a JavaScript API that quite eazily allows you to visualize data in various ways, without any server-side development.
Overview
The API can do a wide range of different visualizations, but it has three main parts that we will look at - the data, the visualization and the events.
The data will always be put into a DataTable object, either populated manually or loaded from a URL. It is simply a two-dimensional table, but each visualization can have different requirements to how the data is entered into the table. The visualization will in turn take this table and make a visual representation of it. Finally, the visualization can trigger events, for instance when the user interacts with the visualization.
To illustrate how easy it is to use, we will take a closer look at a very simple example.
Example: Pie Chart
One of the visualizations available is the pie chart, which should be familiar to everyone. Our first stepp will be to load the Google Visualization API and initialize it, as follows:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart"]});
google.setOnLoadCallback(drawChart);
Here we specify that we'll be using the pie chart package, and a function called drawChart will be called when the page has finished loading. Next we create a DataTable object and add data.
function drawChart() {
var table = new google.visualization.DataTable();
table.addColumn('string', 'Foods');
table.addColumn('number', 'Count');
table.addRows(3);
This will create an empty table object containing two columns and three rows. We have also specified that the first column will be filled with text, and the second with numbers. For illustration purposes we can show how looks as we continue with the code. At the present it is without any data:
| Foods | Count |
|---|---|
Next we can call setValue to put data into the table.
table.setValue(0, 0, 'Pie');
table.setValue(0, 1, 4);
| Foods | Count |
|---|---|
| Pie | 4 |
We now have 4 pies in our dataset.
table.setValue(1, 0, 'Pizza');
table.setValue(1, 1, 2);
| Foods | Count |
|---|---|
| Pie | 4 |
| Pizza | 2 |
Now we have 4 pies and 2 pizzas.
table.setValue(2, 0, 'Burger');
table.setValue(2, 1, 1);
| Foods | Count |
|---|---|
| Pie | 4 |
| Pizza | 2 |
| Burger | 1 |
And finally 1 burger as well.
The setValue function has three parameters - the first one is the row, the second is the column, and the third is the value we're putting into the table. How this is interpreted in the visualization depends on which visualization you are using.
The last step is to draw the pie chart.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(table, {width: 400, height: 240, is3D: true, title: 'Foods'});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
This should be fairly straightforward, and the result should be a pie chart as shown below:
Yes, it really is that simple!
Further Reading
The toolkit has several other ways of visualizing data, some much more complex than this simple pie chart. The documentation for the Google Visualization Toolkit contains a tutorial, full API reference, a list of several other visualizations that you can use, and even information on how you can make your own.
Good luck!
Change to mobile version
Comments
If you want to comment on this article you need to be logged in.