September 2008

Fun with Google Charts

Re-use Rob's GPL-ed JavaScript to easily create Google Charts

Written by Rob Schley

Last month we needed to embed some simple graph charts into a dashboard for one of our projects. We spent some time researching a few options but in the end, settled on Google Charts because the charting system is completely open and well, it is Google so it is as reliable as one can get. The idea was to generate simple HTML tables and then use JavaScript to transform the tables into visual charts.

As it turns out, this is easier than one might think. We started off with a simple, semantic XHTML table similar to the one below.

 
<table>
  <tbody>
    <tr>
      <th>Foo</th>

      <th>Bar</th>
    </tr>
    <tr>
      <td>60%</td>
      <td>40%</td>

    </tr>
  </tbody>
</table>
 

After doing some research into the Google Charts API, we discovered that it was incredibly straight forward as long as you kept the data sanitized so as not to disturb the URL with invalid characters. After about an hour or two of tinkering around with Mootools and the Google Charts API we came up with the JavaScript below.

 
/**
 * @package  JavaScript
 * @copyright  Copyright 2008 Webimagery, LLC. All rights reserved.
 * @license  GNU General Public License
 * @author  Rob Schley <rob.schley[at]webimagery[dot]net>

 */
window.addEvent('domready', function()
{
  // Get all tables with class chart.
  $$('table.chart').each(function(t)

  {
    // Extract the data from the table.
    var f  = t.getElements('th').getText();
    var rd  = t.getElements('td').getText();
    var sl  = new Array();
    var sd  = new Array();

 
    var tb  = t.getElement('tbody');
    if ($chk(tb) && $chk(tb.className)) {

      cht = tb.className;
    } else {
      cht = 'p3';
    }
 
    // Sanitize the data.

    rd.each(function(item){
      item = item.trim().toFloat();
      sd.push(item);
    });

 
    f.each(function(item){
      item = item.trim();
      sl.push(item);
    });

 
    // Create the chart element.
    var c = new Asset.image('http://chart.apis.google.com/chart?cht='+cht
          +'&chd=t:'+sd.join(',')+'&chs=300x100&chl='+sl.join('|'),
      {

        'alt':    'Google Chart',
        'title':  t.getProperty('summary')
      });
 
    t.replaceWith(c);
  });

});
 

Essentially, the JavaScript picks up any tables on the page with class "chart". It will fetch the table headings to use as labels and the table cells will provide the data. The script allows you to specify the type of chart to generate by placing a class on the tbody element that corresponds to the name of the chart type in the Google Charts API. The default type is a three dimensional pie chart.

Of course, this article wouldn't be complete without a demonstration. The code below includes the two extra CSS classes that are required to convert the table into a Google Chart using unobtrusive JavaScript.

 
<table class="chart">

  <tbody class="p3">
    <tr>
      <th>Foo</th>
      <th>Bar</th>

    </tr>
    <tr>
      <td>60%</td>
      <td>40%</td>
    </tr>

  </tbody>
</table>
 

Last but not least, the rendered chart. If you look in the source code of the page, you will find the exact same HTML as above so it degrades perfectly for browsers that do not support JavaScript.

You may use the JavaScript code above under the terms of the GNU General Public License. That means you must preserve the copyright declaration and provide the same privileges to anyone that you distribute the code to. Enjoy!

This article was reprinted, with author Rob Schley's permission from Webimagery.

Add Comment