Google charts with Fusion Table Example error

Question

Alright so I copy and pasted this example from google's chart tools documentation: https://developers.google.com/fusiontables/docs/samples/gviz_datatable

I simply replaced their fusion table info with mine and am unable to get the table to appear.

This is what I have now with the fusion table set to public access:

    <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 'fundraiser' as fundraiser, " +
        "'price' as price, 'merchant' as merchant " +
        'FROM 1QN6e86FybBULPekKvvXd_RF1jw01H7bZAJFjhUg';
    var fundraiser = document.getElementById('fundraiser').value;
    if (team) {
      query += " WHERE 'fundraiser' = '" + fundraiser + "'";
    }
    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>Scoring Team:</label>
  <select id="fundraiser" onchange="drawTable();">
    <option value="">All</option>
    <option value="default">default</option>
    <option value="aaaatester">aaaatester</option>
  </select>
</div>
<div id="visualization"></div>
</body>
</html>

possible duplicate of [Blank page when I use FusionTablesLayer with Google Maps JavaScript API v3](http://stackoverflow.com/questions/12789004/blank-page-when-i-use-fusiontableslayer-with-google-maps-javascript-api-v3) — geocodezip, Dec 12 '13 at 19:39

score 1 · Accepted Answer · answered Dec 12 '13 at 18:02

I'm not sure what exactly was wrong with your query, but this works for me:

function drawTable () {
    console.log('foo');
    var query = 'SELECT fundraiser, price, merchant FROM 1QN6e86FybBULPekKvvXd_RF1jw01H7bZAJFjhUg';
    var fundraiser = document.getElementById('fundraiser').value;
    if (fundraiser) {
        query += ' WHERE fundraiser = \'' + fundraiser + '\'';
    }
    var queryText = encodeURIComponent(query);
    var gvizQuery = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

    gvizQuery.send(function(response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var table = new google.visualization.Table(document.getElementById('visualization'));
        table.draw(response.getDataTable(), {
            showRowNumber: true
        });
    });
}

function init () {
    // draw the table
    drawTable();

    // setup the fundraiser dropdown to redraw the table when the user changes the value
    var el = document.querySelector('#fundraiser');
    if (document.addEventListener) {
        el.addEventListener('change', drawTable);
    }
    else if (document.attachEvent) {
        el.attachEvent('onchange', drawTable);
    }
    else {
        el.onchange = drawTable;
    }
}
google.load('visualization', '1', {packages: ['table'], callback: init});

With this as the HTML:

<div>
    <label>Scoring Team:</label>
    <select id="fundraiser">
        <option value="">All</option>
        <option value="default">default</option>
        <option value="aaaatester">aaaatester</option>
    </select>
</div>
<div id="visualization"></div>

I would suggest, however, that if you are going to have a filter like that, where your initial query is unfiltered, that you switch to using a CategoryFilter to filter your data in the browser instead of making a query to the server every time the user changes the filter. The only time making repeated queries to the server makes sense is when the total traffic to and from the server is likely to be substantially lower using multiple filtered queries than one single unfiltered query.

Google charts with Fusion Table Example error

1 Answers1