My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
dropdown  
Updated Nov 2, 2011 by sthapa%f...@gtempaccount.com

<?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="myselect1" onChange="gotovalue1()">
</select>
<select id="myselect" onChange="gotovalue()">
</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>

Powered by Google Project Hosting