Use a submit button rather than onchange action to re-draw a Spreadsheet Chart?

ERB

unread,

Aug 9, 2012, 11:04:23 AM8/9/12

to google-visua...@googlegroups.com

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">

<head>

<title>Credit Transfer</title>

google.load('visualization', '1', {packages: ['table']});

</script>

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>

<span>Enter Your Search Criteria</span>

<tr>

<td>Colleges Transfering From:</td>

</select></td>

<td>Start Date:</td>

<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>

</tr>

</table>

</form>

</div>

<td>Results</td>

</tr>

<tr>

</div>

</td>

</tr>

</table>

</body>

</html>

asgallant

unread,

Aug 9, 2012, 12:07:09 PM8/9/12

to google-visua...@googlegroups.com

It's much easier to handle everything in javascript, rather than filling in the event handlers in HTML. I rewrote the script to do what you want: http://jsfiddle.net/asgallant/wQNDW/

Your data set here is fairly large, and the round-trip time for queries is noticeably long. You might be better served with one of two approaches:

1) set initial parameters for the query to limit how much data you pull from the server in the original query, or

2) make an initial query to the server to grab all of the data, and then use controls and filters to allow your users to narrow the data set.

1 is faster on page load but the requeries will be slower than the filtering in 2.

ERB

unread,

Aug 10, 2012, 12:16:25 PM8/10/12

to google-visua...@googlegroups.com

Also forgot to ask... I don't want the grid to load until they hit submit - so no auto load - which shows everything.

asgallant

unread,

Aug 10, 2012, 1:17:02 PM8/10/12

to google-visua...@googlegroups.com

That line sets the query. "SELECT *" says "select all columns" and the "WHERE" clause limits what is selected. "where.join(' AND ')" joins all elements of the array into a single string separated by " AND ".

If you are using OR's in the dropdowns, then you should probably enclose the options in parenthesis. "A = B AND M = C OR M = D" evaluates differently from "A = B AND (M = C OR M = D)". In the first case, all records where A = B and M = C are returned, as well as all records where M = D, regardless of the value of A. In the second case, the parentheticals are evaluated first, so only records where M = C or M = D are returned if A = B.

To add more query options to the query, just add them to the array the same as q1 and q2.

Making the table not load on page load is simple: just remove the first call to "sendAndDraw". I tweaked the fiddle a bit to account for these changes: http://jsfiddle.net/asgallant/wQNDW/3/

ERB

unread,

Aug 10, 2012, 4:24:36 PM8/10/12

to google-visua...@googlegroups.com

Thanks - works like a charm!

Reply all

Reply to author

Forward