Monday, July 19, 2010

Table2Visualization : Rendering Google Visualization Charts with HTML Tables

With the advent of the analytics age, one would find applications spring-up every month that lets you track, monitor, and analyze just about anything, from human habits to system behaviors. Such applications generally have a standard implementation pattern wherein they primarily collect, upload, process, and display data. Now, somebody trying to develop one such application would obviously face challenges, of different kinds, at each of these points depending upon the domain of applicability. However, the challenges in displaying the data, in a way that it is understandable to non-professionals, are the same for all of them.

Oftentimes, we rely upon statistical charts and graphs to render such data. These days one would find a plenty of charting libraries that make this possible easily (and some of them without any cost), for example Visualize, MooCharts, ProtoChart etc. One such player in the world of data visualization is Google itself.

Google Visualization is a set of JavaScript libraries that offer a wide range of data representation options with an easily pluggable API. It enables a developer to render statistical charts and graphs from a wide range of data-sources. However, as a developer, I always felt that a very simple and basic data source was always missing in that exhaustive list of data sources; and that is HTML tables. My searched across the web for an answer, either resulted in vein or a complex process with involved importing the data in a Google Docs spreadsheet and then rendering a chart from there. In simple words, there was nothing “Simple and Sweet”.

So, here I had a problem in-hand and decided to solve it for myself and all my fellow developers around the world. The implementation is now available on Google Code at the following location, with a sample to help you jump-start