Sunday, December 23, 2007

Sparklines (Google Analytics Style) with Google Chart API

At the beginning of December Google released their Google Chart API which lets you dynamically generate charts. I did some initial experiments with extended encoding rendering Sine and Cosine waves a few weeks ago (see also).

I recently logged into Google Analytics and wondered how they achieve their graphs. On the Google Analtics reports there are a fair few Flash components but some graphs are generated in a very similar way to the Google Chart API, specifically the sparklines. Sparklines (as developed by Edward Tufte) are data-intense, design-simple, word-sized graphics.

A Google Analytics sparkline:


https://www.google.com/analytics/reporting/sparkline?p=vvt1f3iczaycs7vjs6eahxyauuu0znswgdiuzzv8sauimebsc1g9faeggabx8j

I recognised that Google Analytics URL is using something very similar (if not identical) to extended encoding. Out curiousity I wanted to see if I could recreate my Google Analytics sparklines using Google's Chart API - Tim Shadel is similarly interested in this topic.

From the Google Chart API Google group I found a post by Uwe Maurer (of Google Z├╝rich) concerning the chart API's future support for sparklines.

I found a blog entry on the topic by Deepak Jois and this lead me to some more information about an undocumented API feature that allows you to turn off axes (axes being the plural of axis, apparently axes is a heteronym!). This facility is used by Google Finance.

  1. Test to see if the Google Analytics URL is using extended encoding. Success!! As you can see there is an errouneous point at the end of the graph. In the Google Chart API the length of an extended encoded string should be a even number so I removed the last character of the Google Analytics encoded data string (which had an odd length) it appears to work.

    http://chart.apis.google.com/chart?cht=lc&chs=100x50&chd=e:vvt1f3iczaycs7vjs6eahxyauuu0znswgdiuzzv8sauimebsc1g9faeggabx8j
  2. Using the Google Chart API as documented and Uwe's workaround for turning the axes off:


    http://chart.apis.google.com/chart?chxl=0:||1:|&chxs=0,000000,10,0,_|1,000000,10,0,_&cht=lc&chxt=x,y&chs=100x50&chco=0077CC&chm=B,E6F2FA,0,0,0&chd=e:vvt1f3iczaycs7vjs6eahxyauuu0znswgdiuzzv8sauimebsc1g9faeggabx8

  3. Using the undocumented Google Chart API feature as used in Google Finance:


    http://chart.apis.google.com/chart?cht=lfi&chs=75x30&chco=0077CC&chm=B,E6F2FA,0,0,0&chd=e:vvt1f3iczaycs7vjs6eahxyauuu0znswgdiuzzv8sauimebsc1g9faeggabx8

As you can see the third option produces a sparkline pretty close to what Google Analytics produces. It looks like it would be possible to clone the whole of the Google Analytics dashboard report using the Google Chart API (could be a fun experiment!).