Stacking Code: Overlooking in More Ways than One

Having a basic gadget down is one thing, but our Dorm Energy Heat Map was far from perfect last week, and for several reasons. Naturally we wanted to just set down the framework down, but with that complete we needed to keep moving forward and expanding the Heat Map to work more and more towards the eventual goal of integration into the overall Dorm Energy Competition scheme of things.

Ideally this Heat Map is going to do exactly what I had mentioned before, allowing a comparison of not just across time but amongst multiple meters, making it excellent as a tool for balancing out a community or monitoring your competition for a Dorm challenge. Initially our Map just took random spreadsheets, but this week (and thanks to my partner Ed’s prior experience working out the details of WattDepot connecting from our WattDepotApps) we were able to set up the basic required concepts to connect to a server and start working with some appropriately formed data (The issue with the data I’ll bring up in a bit).

Now that we could get data from a WattDepot system, meaning we could get actual energy data, we hit the next two obstacles to making our ideal gadget: The WattDepot Data input can’t be selected like we had it for our past Visualizer, and the Table you get back is inverted for what we would want. The best case scenario interface wise would be for us to use drop downs, but we were told that for gadgets that wasn’t possible, and so Ed was tasked with forging the basic selection set up for the time being. The tables on the other hand were a little bit of an awkward problem, as it would require that we transpose the table from being primarily vertical in nature to being horizontal.


(The Data Table’s display in the gadget initially. Notice how your focus goes up to down.)

When it comes to transposing tables the concept isn’t an old one, but what surprised me along the way was the lack of information regarding this for Google Visualization. This brought me to another issue with regards to our project: the instability of working with a visualization that is not one created by Google. It seemed like a simple concept to have the table configurable whether it would prefer vertical or horizontal display preference, but it didn’t. Finding a post about it on the group for Google Visualizations I was disappointed to see that they sided with not transposing tables and if they came in wrong then we should fix it on the server side (where the data originally comes from). I’m not one for accepting that answer, especially knowing that transposing a table from vertically themed to horizontally themed is just a matter of switching the values around.


(A sample of the transpose code. The concept is basically switching rows and columns around)

I stepped up to the plate while Ed was fine tuning our interface and decided to just get it done, after all switching rows and columns shouldn’t be hard, or so I thought. Using some sample data table from an older version while Ed was working I constructed a method that pretty much exchanged the rows and the columns, and while initially it did the trick it was looking some labeling along the way. During this time it’s when the proverbial mud hit the fan, as I thinking of multiple situations where I could have gotten thrown off, even using the developer tools I had on hand to trace through the code I was at a loss for error. I was only until the next day when Ed noticed that there was type discrepancy because of the labels. Something so simple didn’t pull flags in Javascript test because it technically generated output but it wasn’t String output. Sometimes when you are putting in code to code you don't know very well things just get overlooked and then you find yourself over-looking for a solution. Fixing that Ed was able to add the transpose code to his interface and create one of the nicer looking versions of our work.


(Stable Version 1 I think. Now we just need more sources).

With that done we are well on our way, unfortunately we are still behind our expected goals. In order to make our work usable we need make detailed guides (which we were both not focusing on since we weren’t certain of how our layout was going to turn out), and allowing for multiple sources (after all how could you check out the competition compared to yourself without showing both?). With a lot more to do and a Milestone check point, look forward to seeing the WattDepot Heat Map develop into a cool tool for checking energy.