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/-/ZCVU_FUISH4J.
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.
