Works - Thanks - 2 questions and one might solve the other...
What does this line do? - query.setQuery('SELECT * WHERE ' + where.join('
AND ')); What if I added a field that used or's would this change?
If I where to add more fields how would I go about it?
For example I would add:
var q3 = document.getElementById('query-3');
q3.options[q3.selectedIndex].value
<select id='query-3'>
<option value='M = A or M = B or M = C or M = D'>None</option>
<option value='M = B or M = B or M = C or M = D'>A</option>
<option value='M = B or M = C or M = D'>B</option>
<option value='M = C or M = D'>C</option>
<option value='M = D'>D</option>
</select>
Thanks for the insight and help ;]
On Thursday, August 9, 2012 11:07:09 AM UTC-5, asgallant wrote:
>
> 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<https://developers.google.com/chart/interactive/docs/gallery/controls#gallery>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.
>
> On Thursday, August 9, 2012 11:04:23 AM UTC-4, ERB wrote:
>>
>> 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/-/aCvCtZcjHosJ.
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.
