Search code examples
javascriptgoogle-visualizationgoogle-fusion-tables

Using a user selected variable to select a column in a fusion table query

This is perhaps a syntax question. The core of the problem is switching columns to rows but that seems more complicated than just generating a table that gives me all the data I need per column.

The question is how do I pass the variable "beach" to the SELECT query for the fusion table ? The output should be a two column table ; col0 and the selected column form this table fusiontable with all data per column

<html>
  <head>
    <meta charset="UTF-8">

    <title>Beach pollution individual results</title>

    <link href="/apis/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <style type="text/css">



    </style>

    <script type="text/javascript">
      google.load('visualization', '1');

      function drawTable() {
        // Construct query
        var beach = document.getElementById('beach').value;
        var query = "SELECT ' 'col0', '" beach "' " +'FROM 1cmRBkYKhvdGUR-xXBLcMGU67koVYEgpDJT6jxOnA';

        var queryText = encodeURIComponent(query);
        var gvizQuery = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

        // Send query and draw table with data in response
        gvizQuery.send(function(response) {
          var numRows = response.getDataTable().getNumberOfRows();
          var numCols = response.getDataTable().getNumberOfColumns();

          var ftdata = ['<table><thead><tr>'];
          for (var i = 0; i < numCols; i++) {
            var columnTitle = response.getDataTable().getColumnLabel(i);
            ftdata.push('<th>' + columnTitle + '</th>');
          }
          ftdata.push('</tr></thead><tbody>');

          for (var i = 0; i < numRows; i++) {
            ftdata.push('<tr>');
            for(var j = 0; j < numCols; j++) {
              var rowValue = response.getDataTable().getValue(i, j);
              ftdata.push('<td>' + rowValue + '</td>');
            }
            ftdata.push('</tr>');
          }
          ftdata.push('</tbody></table>');
          document.getElementById('ft-data').innerHTML = ftdata.join('');
        });
      }

      google.setOnLoadCallback(drawTable);
    </script>

  </head>
  <body>
    <div>
      <label>Beach:</label>
      <select id="beach" onchange="drawTable();">
        <option value="" selected="selected">All</option>
        <option value="Baye de Clarens">Baye de Clarens</option>
        <option value="Pierrier">Pierrier</option>
        <option value="Pierrier sud">Pierrier sud</option>
        <option value="Maladaire">Maladaire</option>
        <option value="Le Port, La Tour-de-Peilz">Port de La La Tour-de-Peilz</option>
        <option value="Bain des Dames">Bain des dames</option>
        <option value="Oyonne">Oyonne</option>
        <option value="Veveyse">Veveyse</option>
        <option value="L' Arabie">l'Arabie</option>
        <option value="Montreux">Montreux</option>
        <option value="Boiron">Boiron</option>
        <option value="Villa Barton">Villa Barton</option>
        <option value="Jardin ">Jardin Botanique</option>
        <option value="Thonnon">Thonnon</option>
      </select>
    </div>
    <div id="ft-data"></div>
  </body>
</html>

This is very similar to another question I asked, that solution works and will be use for the main page, but the Idea is to give local residents to get the speicifc details and data on the beach in their neighbohood.

Thanks

Solution

  • There are js syntax errors in the 'query =' statement

    1) Learn about using quotes.

    2) + is the Javascript operator for concatenating strings

    var beach = 'Utah';

// var query = "SELECT ' 'col0', '" beach "' " +'FROM 1cmRBkYKhvdGUR-xXBLcMGU67koVYEgpDJT6jxOnA';

 var query = "SELECT 'col0', '" + beach + "' FROM 1cmRBkYKhvdGUR-xXBLcMGU67koVYEgpDJT6jxOnA";

console.log(query);