Google Chart API + some JavaScript = Beautiful Charts

The Google Chart API lets you dynamically generate charts. To see the Chart API in action, open up a browser window and copy the following URL into it:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Press the Enter or Return key and – presto! – you should see the following image:

Yello Line Chart

 

I just happened to notice last week that Google released a nifty Chart API for public use. The Google Chart API returns a PNG-format image in response to a URL. Several types of image can be generated: line, bar, and pie charts for example. For each image type you can specify attributes such as size, colors, and labels.

You can include a Chart API image in a webpage by embedding a URL within an <img> tag. When the webpage is displayed in a browser the Chart API renders the image within the page.

Let us develop a pie chart of our own to show the popularity tallies of the various games in India.First, you need the chart data. Since it is a pie chart, you just need two columns: one for the labels and one for the values. My table has an ID since that is how I plan on accessing it out of the DOM. The HTML looks like this:

 

<table id="GraphThisTable" cellpadding="2"><tr>

<td>Game</td><td>Popularity</td>

</tr><tr>

<td>Cricket</td><td>940</td></tr>

<tr>  <td>Hockey</td><td>744</td>

</tr><tr>

<td>Footbal</td><td>737</td></tr>

<tr>  <td>Tennis</td><td>53</td>

</tr><tr>

<td>Other</td><td>27</td></tr>

</table>

The Google Chart API doesn’t accept just any old values; instead, you have to encode the values in a way that the API recognizes. I chose to use its simple encoding because, well, it’s simple. It gives you a range from 0 to 61 for each value encoded with letters and numbers. This means you have to normalize your data to that max value of 61 and then encode the normalized value with the appropriate letter or number. For the simple encoding, Google provides a sample JavaScript on how to do this.

This takes care of encoding the data, but now I have to figure out how to extract the data from the table along with the labels, so that each slice of the pie has a proper label to go with it. That’s where the unique ID comes into play — I just use the getElementByID method of the document object, like this:

var tbl = document.getElementById(“GraphThisTable”);

For my table struture, I will assume that the first row always has the headings — the first column is the labels and the second column is the values. We don’t pass these labels over to the Google Chart API, but I wanted to use them to generate a heading for my chart. So I have to grab the rows out of the table object I obtained earlier and then pick out the first row and extract the values I want:

var rows = tbl.getElementsByTagName(“tr”);

var headings = rows[0].getElementsByTagName(“td”);

var graphedPer = headings[0].innerHTML;

var graphLabel = headings[1].innerHTML;

document.write(“<P>” + graphLabel + ” per ” + graphedPer);

Here is the easy part: You just iterate over the rest of the table, grabbing the labels and values. You also have to determine which value is the maximum because the encoding method from Google requires you pass it an array of values and the max value within that array. After that, it’s just a simple matter of generating the proper Google URL and writing it into your document. (I go the lazy route and just use a document.write to embed it into my document.)

Here’s the whole thing (which ends up being pretty short), including the snippet from Google:

<script>

var simpleEncoding = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789’;

function simpleEncode(values,maxValue) {

var chartData = [‘s:’];

for (var i = 0; i < values.length; i++) {

var currentValue = values[i];

if (!isNaN(currentValue) && currentValue >= 0) {

chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));

} else {

chartData.push(‘_’);

}

}

return chartData.join(”);

}

var chartBaseUrl = “http://chart.apis.google.com/chart?&#8221;;

var chartParams = “chs=250×150&cht=p”;

var values = “&chd=”;

var labels = “&chl=”;

var valueArray = new Array();

var max = 1;

var tbl = document.getElementById(“GraphThisTable”);

var rows = tbl.getElementsByTagName(“tr”);

var headings = rows[0].getElementsByTagName(“td”);

var graphedPer = headings[0].innerHTML;

var graphLabel = headings[1].innerHTML;

document.write(“<P>” + graphLabel + ” per ” + graphedPer);

for(i = 1; i < rows.length; i++){

var cols = rows[i].getElementsByTagName(“td”);

if (i == 1) {

labels = labels + cols[0].innerHTML;

} else {

labels = labels + “|” + cols[0].innerHTML;

}

valueArray[i – 1] = cols[1].innerHTML;

if (cols[1].innerHTML > max)

max = cols[1].innerHTML;

}

values = values + simpleEncode(valueArray,max);

document.write (“<P><img src=” + chartBaseUrl + chartParams + labels + values + “>”);

</script>

That’s it, easy peasy. Seeing the above code in action, it would look like this:

Game Chart
Advertisements

2 thoughts on “Google Chart API + some JavaScript = Beautiful Charts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s