2/19/10

getting started with google table visualization

google offers a very cool way to display data in a dynamic fashion with little more effort that you'd spend building a standard html table - if you know how to do it...






getting started: visit and book mark these two pages
http://code.google.com/apis/visualization/documentation/gallery/table.html
http://code.google.com/apis/ajax/playground/?type=visualization

They will be your friend for the duration of the exercise. The first rule to remember when working with the tables:
1. Google will not tolerate a single error. period. Miss a comma, formatter, line, etc. and the whole thing simply won't render.

The second rule - don't forget the first...

With this in mind - let's take a quick look at the structure.
add/define the columns: data.addColumn('date', 'Date');
define # rows: data.addRows(6);
add data/cells:
data.setValue(0, 0, new Date(2008, 1 ,1));
data.setValue(0, 1, 30000);

The number one thing that screwed me up was the data type - if you assign the type "number" and accidently put in a non-numeric value - then the table won't render. The second thing - the data format has to be in a google specific format as shown above: new Date(2008, 1 ,1). This date is actually Feb 1, 2008 - since the months start with zero. I had to write a vbscript function to create dates in this format (not knowing any other way to do it). Next tip - string values have to be enclosed in ' marks, numeric values can not be.

Last two problems i found - when rendering data that had been entered via text area - the table wouldn't render. I finally figured out that the text area (due to my wrap settings) was putting in vbLf (line breaks) - this was then rendering a line break in the html code that was trying to generate the table - and blowing up. Doing a Replace(raw-text,vbLf,"") did the trick. The last one was one that any decent javascript programmer would know for sure - i had to escape all ' chars - by rendering then as /' using a similar replace function.

The last problem didn't really have anything to do with the table itself - instead it was a css/style issue - where the background color that was assigned to a div was selectively hiding text within the div ONLY when the google table was present and rendered (and only in IE browsers). If the table javascript code was there, but the table didn't load (due to an error) the div/background color issue wouldn't happen. The text would appear and dissapear when specific mouse over patterns occured over the google table. very odd. on the production site i solved this issue by using an inline style within the div that normally had a background color <-div style="background:'';"-> IE browser had the background color supressed - allowing the text to be seen, firefox and others ignored this command and still showed the background color.

Update: assigning an explicit width to the div that holds the datatable prevented the table from 'spilling over onto' the content in the other column.

The final result?
http://www.logsitall.com/tidy.html

No comments:

Post a Comment