Wow, thank you. I couldn't work out how to get the two filters to play together. I'll have a look in your code and figure it out for future use.
On Wednesday, 18 April 2012 15:00:34 UTC+1, asgallant wrote: > > I noticed your first script doesn't work right when both dropdowns are > used; I did up a quick fix if you're interested: > http://jsfiddle.net/E7qHH/ > > As for the second, it seems to work just fine for me: > http://jsfiddle.net/E7qHH/1/ > > On Tuesday, April 17, 2012 3:54:06 PM UTC-4, Daniel Bentley wrote: >> >> I have created two pages which should show tables from a Fusion Tables >> database. >> >> This one works: >> >> <!DOCTYPE html> >> <!-- >> Copyright 2011 Google Inc. All Rights Reserved. >> >> Licensed under the Apache License, Version 2.0 (the "License"); >> you may not use this file except in compliance with the License. >> You may obtain a copy of the License at >> >> http://www.apache.org/licenses/LICENSE-2.0 >> >> Unless required by applicable law or agreed to in writing, software >> distributed under the License is distributed on an "AS IS" BASIS, >> WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. >> See the License for the specific language governing permissions and >> limitations under the License. >> --> >> <html> >> <head> >> <meta charset="UTF-8"> >> >> <title>Fusion Tables API Example: Google Chart Tools Data >> Table</title> >> >> <link href="/apis/fusiontables/docs/samples/style/default.css" >> rel="stylesheet" type="text/css"> >> <script type="text/javascript" src="http://www.google.com/jsapi >> "></script> >> <script type="text/javascript"> >> google.load('visualization', '1', { packages: ['table'] }); >> >> function drawTable() { >> var query = "SELECT 'Ward' as Ward, " + >> "'Full Name' as Name, 'Party' as Party, 'Address' as Address, >> 'Phone' as Phone " + >> 'FROM 3566929'; >> var team = document.getElementById('team').value; >> if (team) { >> query += " WHERE 'Ward' = '" + team + "'"; >> } >> var party = document.getElementById('party').value; >> if (party) { >> query += " WHERE 'Party' = '" + party + "'"; >> } >> var queryText = encodeURIComponent(query); >> var gvizQuery = new google.visualization.Query( >> 'http://www.google.com/fusiontables/gvizdata?tq=' + >> queryText); >> >> gvizQuery.send(function(response) { >> var table = new google.visualization.Table( >> document.getElementById('visualization')); >> table.draw(response.getDataTable(), { >> showRowNumber: true >> }); >> }); >> } >> >> google.setOnLoadCallback(drawTable); >> </script> >> </head> >> <body> >> <div> >> <label>Filter by Ward:</label> >> <select id="team" onchange="drawTable();"> >> <option value="">All</option> >> <option value="Ashton">Ashton</option> >> <option value="Brookfield">Brookfield</option> >> <option value="Cadley">Cadley</option> >> <option value="College">College</option> >> <option value="Deepdale">Deepdale</option> >> <option value="Fishwick">Fishwick</option> >> <option value="Garrison">Garrison</option> >> <option value="Greyfriars">Greyfriars</option> >> <option value="Ingol">Ingol</option> >> <option value="Larches">Larches</option> >> <option value="Lea">Lea</option> >> <option value="Moor Park">Moor Park</option> >> <option value="Preston Rural East">Preston Rural East</option> >> <option value="Preston Rural North">Preston Rural North</option> >> <option value="Ribbleton">Ribbleton</option> >> <option value="Riversway">Riversway</option> >> <option value="Sharoe Green">Sharoe Green</option> >> <option value="St. George's">St.George's</option> >> <option value="St. Matthew's">St. Matthew's</option> >> <option value="Town Centre">Town Centre</option> >> <option value="Tulketh">Tulketh</option> >> <option value="University">University</option> >> </select> >> <label>Filter by Party:</label> >> <select id="party" onchange="drawTable();"> >> <option value="">All</option> >> <option value="Conservative">Conservative</option> >> <option value="Labour">Labour</option> >> <option value="Liberal Democrats">Liberal Democrats</option> >> <option value="Deepdale Independent">Deepdale Independent</option> >> <option value="Sharoe Green Independent">Sharoe Green >> Independent</option> >> </select> >> </div> >> <div id="visualization"></div> >> </body> >> </html> >> >> >> >> BUT this one doesn't >> >> <!DOCTYPE html> >> <!-- >> Copyright 2011 Google Inc. All Rights Reserved. >> >> Licensed under the Apache License, Version 2.0 (the "License"); >> you may not use this file except in compliance with the License. >> You may obtain a copy of the License at >> >> http://www.apache.org/licenses/LICENSE-2.0 >> >> Unless required by applicable law or agreed to in writing, software >> distributed under the License is distributed on an "AS IS" BASIS, >> WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. >> See the License for the specific language governing permissions and >> limitations under the License. >> --> >> <html> >> <head> >> <meta charset="UTF-8"> >> >> <title>Fusion Tables API Example: Google Chart Tools Data >> Table</title> >> >> <link href="/apis/fusiontables/docs/samples/style/default.css" >> rel="stylesheet" type="text/css"> >> <script type="text/javascript" src="http://www.google.com/jsapi >> "></script> >> <script type="text/javascript"> >> google.load('visualization', '1', { packages: ['table'] }); >> >> function drawTable() { >> var query = "SELECT 'Stars' as Stars, " + >> "'Name' as Name, 'Address1' as Address, 'PostalCode' as >> Postcode " + >> 'FROM 3573055'; >> var team = document.getElementById('team').value; >> if (team) { >> query += " WHERE 'Stars' = '" + team + "'"; >> } >> var queryText = encodeURIComponent(query); >> var gvizQuery = new google.visualization.Query( >> 'http://www.google.com/fusiontables/gvizdata?tq=' + >> queryText); >> >> gvizQuery.send(function(response) { >> var table = new google.visualization.Table( >> document.getElementById('visualization')); >> table.draw(response.getDataTable(), { >> showRowNumber: true >> }); >> }); >> } >> >> google.setOnLoadCallback(drawTable); >> </script> >> </head> >> <body> >> <div> >> <label>Filter by Star Rating:</label> >> <select id="team" onchange="drawTable();"> >> <option value="">All</option> >> <option value="5">5 stars</option> >> <option value="4">4 stars</option> >> <option value="3">3 stars</option> >> <option value="2">2 stars</option> >> <option value="1">1 star</option> >> <option value="0">No stars</option> >> </select> >> </div> >> <div id="visualization"></div> >> </body> >> </html> >> >> >> I used the same code, I just changed the values around. I can't for the >> life of me figure out what is wrong with the second page. >> >> Thanks for any help! >> >> >> >> -- 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/-/3c0ojgmodsMJ. 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.
