Flux Capacitor of Transposition

Our BioHeatMap Google Gadget is well underway and almost complete. We've managed to move away from using Google Spreadsheet as our data source and can now take in Data Source URL's from WattDepot and user specified source to output a BioHeatMap of either the last 24 hours, last 7 days, or last 14 days. These options were chosen because of the width constraints set by Google. We didn't want a gadget that required scrolling, but wanted it to give a general idea of energy usage..using colors instead of boring numbers!

The most up-to-date version of the Gadget can be found here.
Whereas here's a screen shot of it running on my iGoogle page:
(Using Firefox and showing Last 24 Hours of SIM_HPOWER)


I'm extremely pleased with the output of this Google Gadget. Needless to say, this scant 3 liner gadget took a while to become what it is. After getting the query URL setup, and finally getting the auto-size height working, Kendyll and I ran into a huge problem with the visualization. Our very first WattDepot BioHeatMap visualization came out looking like this:


This is a step backwards because our proposed view of the gadget was to have the columns as dates, and the rows as sources. What we got instead was a completely transposed version of what we intended. The first thing I did was go to the Google Visualization API and look up the methods for the response tables. But to no avail there wasn't anything about a "transpose" method. At that point, I sent Kendyll a message on my progress. Kendyll scoured the Visualization Group to see if anyone had done this before, but his efforts for fruitless. So Kendyll decided to take on the task of creating a new Data Table and manually copying values to transpose the response table.

In order to get an idea on how to transpose the table, we had to get a little more information on what a response data table looks like. Using the toJSON() method on a response table, this is what a response table from a query to WattDepot looks like:


The table is column-typed/based, meaning each column defines the type of data that's placed in each cell for it's column. The columns are defined first ('datetime', then 'number' as above), then populated by rows. So in our case we would want the first column to be defined as a 'string' to list all the sources, and the rest of the columns to be defined as 'numbers' which hold the numerical value of whatever data has been queried. For the most part, the heart of the transpose function was implemented by Kendyll, however, to cross the finish line, he needed a fresh pair of eyes to look over the code as there were some minor details he over-looked. In this case, the column labels are strongly typed, and need to be a string. So we were using Date objects and had to explicitly call the toString method in order for the Data Table to process correctly.

Here's a snippet of the transpose function: (It takes in a response data table and returns a new table that contains transposed values)


After some final formatting of the dates, since blatantly using the Date objects toString method is extremely long for a Google Gadget, I coded a method to take only the parts that we needed and the final output of the gadget currently looks like my inserted picture above.

I added issues to Issue Manager for our Google Project, but the next thing we need to do is implement multi-source capability, because right now it only takes in a single source, but ideally it will be comma separated.