Gauge Ticker

While updating the gauge gadget for wattdepot this week, we ran into a few small problems. Initially, we ran into a simple problem that every programmer hits once in a while. I had a small bug where we missed typed an id for one of our id's in the XML google gadget. Instead of writing 'data_source_URL', I wrote 'datasourceURL'. This one small bug caused me problems for about 1-2 hours. We initially thought that the bug in our program was from the query request and retrieve that we made to the spreadsheet document. We thought that the query was the cause of error since the program would seem to bomb out every time it would enter the function that gets information from the spreadsheet. I had to figure out the program by trying to show the string on the screen through a 'div' statement in the xml.

After I finally fixed the problem I began to work on getting the gadget to refresh every 5, 10, 30, 60, and 300 seconds. I quickly got the gauge to refresh every x amount of seconds by using the setTimeout() function. But I couldn't figure out why the gadget wouldn't get the new values that were being updated on the spreadsheet. I found that the 'Query' function for the google visualizations needed to be called to get the more recent spreadsheet info. So i wrote the following code:

function moveTicker() {
queryDataValue = new google.visualization.Query(dataSourceUrl);
queryDataValue.send(handleDataValueQueryResponse);
setTimeout("moveTicker()", x);
}

This new function call to the spreadsheet at the given URL using the Query information every x amount of seconds. The function handleDataValueQueryResponse is a function that is called when the query is sent. The handleDataValueQueryResponse function, only retrieves the spreadsheet data and updates the gauge. This code runs in an infinite loop, since the program is designed to always retrieve data.

My project can be found here.