Fusion Tables > Chart Tools issue

49 views
Skip to first unread message

Daniel Bentley

unread,
Apr 17, 2012, 3:54:06 PM4/17/12
to google-visua...@googlegroups.com
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


  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


  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!
 

asgallant

unread,
Apr 18, 2012, 10:00:34 AM4/18/12
to google-visua...@googlegroups.com
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/ 

Daniel Bentley

unread,
Apr 18, 2012, 11:36:37 AM4/18/12
to google-visua...@googlegroups.com
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.
Reply all
Reply to author
Forward
0 new messages