[visualization-api] Use a submit button rather than onchange action to re-draw a Spreadsheet Chart?

Thu, 09 Aug 2012 08:04:28 -0700 

I am trying to add a submit button to pass all the values selected in 
the drop-downs at once and then display the results - rather than use the 
onchange action which reloads the results every time a change is made one 
by one ;[

For example a spreadsheet with age, gender, etc... as the columns - I would 
want to select age = 25, gender = M, and hit submit for the results all at 
once rather than have the chart re-draw when each one is selected!

I know I can take the onchange='setQuery(this.value)' out, but how do I use 
the submit button to pass all the values and re-draw the chart?

Any help would be greatly appreciated.

The Live Page - http://www3.govst.edu/ebrenes/pull.html

The Code - 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Credit Transfer</title>
    <script type="text/javascript" 
src="http://www.google.com/jsapi";></script>
    <script type="text/javascript">
  google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">
var options = {'showRowNumber': false};
var data;
var queryInput;
var query = new 
google.visualization.Query('http://spreadsheets.google.com/tq?key=0Ap9RqaTC2OT4dEFzWUk2Ymk3SXBmZ2xvbnJPRXBTeHc&pub=1');
    
    function sendAndDraw() {
      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }
    
    function handleQueryResponse(response) {
  if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + 
response.getDetailedMessage());
return;
  }
  data = response.getDataTable();
  var table = new 
google.visualization.Table(document.getElementById('querytable'));
  table.draw(data, {'showRowNumber': false});
    }
    
    function setQuery(queryString) {
      // Query language examples configured with the UI
      query.setQuery(queryString);
      sendAndDraw();
      queryInput.value = queryString;
    }
    google.setOnLoadCallback(sendAndDraw);

    </script>
  </head>
<body style="font-family: Arial; border: 0 none;">
<div style="margin-bottom: 10px; padding: 5px; border: 1px solid gray; 
background-color: buttonface;">
<span>Enter Your Search Criteria</span>
<form action="">
<table style="font-size: 12px; ">
  <tr>
    <td>Colleges Transfering From:</td>
    <td><select id='query-1' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='where A = 1083'>COD</option>
      <option value='where A = 1082'>Not COD</option>
    </select></td>
    <td>Start Date:</td> 
    <td><select id='query-2' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='where F >= 2011'>Between Now and 2011</option>
      <option value='where F <= 2010 and F >= 2005'>Between 2010 and 
2005</option>
      <option value='where F <= 2004 and F >= 2000'>Between 2004 and 
2000</option>
      <option value='where F <= 1999 and F >= 1995'>Between 1999 and 
1995</option>
      <option value='where F <= 1994 and F >= 1990'>Between 1994 and 
1990</option>
      <option value='where F <= 1989 and F >= 1985'>Between 1989 and 
1985</option>
      <option value='where F <= 1984 and F >= 1980'>Between 1984 and 
1980</option>
      <option value='where F <= 1979 and F >= 1975'>Between 1979 and 
1975</option>
      <option value='where F <= 1974 and F >= 1970'>Between 1974 and 
1970</option>
      <option value='where F <= 1969 and F >= 1965'>Between 1969 and 
1965</option>      
    </select></td>
    <td><input id="button" type="button" value="Submit" onclick="" 
></input></td>
  </tr>
</table>
</form>
</div>
<table style='width: 100%;'>
  <tr style='font-size: 20px;'>
    <td>Results</td>
  </tr>
  <tr>
    <td style="width: 50%; padding: 10px; vertical-align: top;">
    <div id="querytable"></div>
    <br></br>
    </div>
    </td>
  </tr>
</table>
</body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-visualization-api/-/gw7wamnwxpEJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-visualization-api?hl=en.

Reply via email to