<?xml version="1.0" encoding="UTF-8"?>
<module>
<ModulePrefs title="Sample Subash Gadget"
description="Fun sample spreadsheet Gadget."
author="Google Engineering"
author_affiliation="Google Inc."
author_email="visualization.api+spreadsheet@gmail.com"
screenshot="/ig/modules/spreadsheet.png"
thumbnail="/ig/modules/spreadsheet-thm.png" >
<require feature="idi">
</require>
<require feature="locked-domain">
</require>
Unknown end tag for </moduleprefs>
<UserPref name="
table_query_url" display_name="Data source url" required="true"/>
<UserPref name="table_query_refresh_interval"
display_name="Data refresh interval (minutes)"
default_value="0" datatype="enum" required="false">
<enumvalue value="0" display_value="Do not refresh">
</enumvalue>
<enumvalue value="60" display_value="1">
</enumvalue>
<enumvalue value="300" display_value="5">
</enumvalue>
<enumvalue value="1800" display_value="30">
</enumvalue>
Unknown end tag for </userpref>
<content type="html">
<![CDATA[
<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script language="javascript">
function gotovalue()
{
var keyselection = document.getElementById('myselect');
var keyvalue = keyselection.options[keyselection.selectedIndex];
window.top.location.href=keyvalue.value;
}
</script>
<select id="myselect" onChange="gotovalue()"> </select> | <select id="myselect1" onChange="gotovalue1()">
</select>
|
<script>
/
- Load the APIs and run sendQuery when the load is complete
-
var gadgetHelper = null; IG_RegisterOnloadHandler(loadVisualizationAPI); function loadVisualizationAPI() { google.load("visualization", "1");
google.setOnLoadCallback(sendQuery);
} /
- Create a query (shaped by the Gadget's user preferences), then
- send it to the spreadsheet data source. Also give the name of a
- function ("handleQueryResponse") to run once the spreadsheet data
- is retrieved:
-
function sendQuery() { var prefs = new IG_Prefs(); // User preferences
gadgetHelper = new google.visualization.GadgetHelper();
var query = gadgetHelper.createQueryFromPrefs(prefs);
query.send(handleQueryResponse);
} /
- The core logic. Process the spreadsheet data however you want.
- In this case, we create HTML to be presented back to the user.
- We'll use inline comments to provide a step-by-step description
- of what we're doing:
-
function handleQueryResponse(response) { /
- Use the visualization GadgetHelper class to handle errors
-
if (!gadgetHelper.validateResponse(response)) {
return; // Default error handling was done, just leave.
}
/
- GET THE DATA FROM THE SPREADSHEET - sorry to scream in caps, but
- this is a key step
-
var data = response.getDataTable();
var html1; // start the HTML output string
//html.push('<select id="myselect" onChange="gotovalue()">
');
/
- Process all Rows in the specified range
-
for (var row = 0; row < data.getNumberOfRows(); row++) {
var formattedValue = data.getFormattedValue(row, 0);
formattedValue = escapeHtml(formattedValue);
html1+='<option value="'+data.getFormattedValue(row, 1)+'">
';
html1+=formattedValue;
html1+='</option>
';
}
//html.push('</select>
');
/
- Set the generated html into the container div.
-
var tableDiv = gel('myselect');
tableDiv.innerHTML = html1;
var hh1=gel('hh');
hh1.innerHTML='';
//tableDiv.style.width = document.body.clientWidth + 'px';
//tableDiv.style.height = document.body.clientHeight + 'px';
}
/
- Define any supporting code you need
- (like this handy function to escape special characters for html output):
-
function escapeHtml(text) { if (text == null) {
return '';
}
return hesc(text);
} </script>
]]> </content>
</module>