title: Google chart passing query results to google charts
body: <p>We have data from multiple sites, the data gets updateclean it up and store it on a fusion table.  We wanted to allow users to select the site (drop down menu web page) to see differnt data presentations.  I found an example to this with the Google Charts API using the "Data Table", but canot get it to workI mofidfied and used it to display another type of data table. But canont get the it to wokr with line other charts like line charts and bar charts. </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;style&gt;&lt;/style&gt;
  &lt;script type="text/javascript"&gt;
        google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawVisualization);
  
  function drawVisualization() {
  
      var query = "SELECT 'Label' as beach, " + "'Pieces total' as Total " +'FROM 1c-FiEDwdwMt55a4AlE8Xuu40rUBR_qeI8ENiHtPV';
          var beach = document.getElementById('beach').value;
          if (beach) {
            query += " WHERE 'Label' = '" + beach + "'";
          }
          var queryText = encodeURIComponent(query);
          var gvizQuery = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
          gvizQuery.send(function (handleQueryResponse){
              var data = response.getDataTable();
              var chart = new google.visualization.BarChart(document.getElementById('clarensBarchartPhone'));
              chart.draw(data, {}
                               }
                         )
              };
  &lt;/script&gt;
  &lt;/head&gt;
    &lt;body&gt;
     &lt;div&gt;
        &lt;label&gt;Beach:&lt;/label&gt;
        &lt;select id="beach" onchange="drawVisualization();"&gt;
          &lt;option value="" selected="selected"&gt;All&lt;/option&gt;
          &lt;option value="Baye de Clarens"&gt;Baye de Clarens&lt;/option&gt;
          &lt;option value="Pierrier"&gt;Pierrier&lt;/option&gt;
          &lt;option value="Pierrier sud"&gt;Pierrier sud&lt;/option&gt;
          &lt;option value="Maladaire"&gt;Maladaire&lt;/option&gt;
          &lt;option value="Port La Tour-de-Peilz"&gt;Port de La La Tour-de-Peilz&lt;/option&gt;
          &lt;option value="Bain des dames"&gt;Bain des dames&lt;/option&gt;
          &lt;option value="Oyonne"&gt;Oyonne&lt;/option&gt;
          &lt;option value="Veveyse"&gt;Veveyse&lt;/option&gt;
          &lt;option value="L'Arabie"&gt;l'Arabie&lt;/option&gt;
          &lt;option value="Montreux"&gt;Montreux&lt;/option&gt;
          &lt;option value="Boiron"&gt;Boiron&lt;/option&gt;
          &lt;option value="Villa Barton"&gt;Villa Barton&lt;/option&gt;
          &lt;option value="Jardin Botanique"&gt;Jardin Botanique&lt;/option&gt;
          &lt;option value="Thonnon"&gt;Thonnon&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
   &lt;div id="clarensBarchartPhone" style="width: 450px; height: 375px; margin:0 auto 0 auto"&gt;&lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The query works (it has functional output), I don't understand how to use that output in another form of Chart.</p>
  
  <p>Thanks</p>