CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationgoogle-fusion-tables
Roger Erismann
Roger Erismann

Reputation: 53

Google chart passing query results to google charts

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. 

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style></style>
<script type="text/javascript">
      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, {}
                             }
                       )
            };
</script>
</head>
  <body>
   <div>
      <label>Beach:</label>
      <select id="beach" onchange="drawVisualization();">
        <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="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 Botanique">Jardin Botanique</option>
        <option value="Thonnon">Thonnon</option>
      </select>
    </div>
 <div id="clarensBarchartPhone" style="width: 450px; height: 375px; margin:0 auto 0 auto"></div>

  </body>
</html>

The query works (it has functional output), I don't understand how to use that output in another form of Chart.

Thanks

Upvotes: 1

Views: 707

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

first, it is recommended to use loader.js for loading google charts, vs. the older library jsapi...

next, there is a problem with the handleQueryResponse function.

handleQueryResponse is typically the name of the function, and the (argument) should be response

here, response will not exist...

function (handleQueryResponse) {
  var data = response.getDataTable();

it should be something like... 

function handleQueryResponse (response) {
  var data = response.getDataTable();

but actually don't need the name when using inline anyway, see following working example...

google.charts.load('current', {
  callback: drawVisualization,
  packages:['corechart', 'table']
});

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 (response) {
    var data = response.getDataTable();
    var chart = new google.visualization.BarChart(document.getElementById('clarensBarchartPhone'));
    chart.draw(data, {
      chartArea: {
        width: '40%'
      }
    });
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>
  <label>Beach:</label>
  <select id="beach" onchange="drawVisualization();">
    <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="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 Botanique">Jardin Botanique</option>
    <option value="Thonnon">Thonnon</option>
  </select>
</div>

<div id="clarensBarchartPhone" style="width: 450px; height: 375px; margin:0 auto 0 auto"></div>

Upvotes: 2

Related Questions