谷歌图表将查询结果传递给谷歌图表

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.

我们有来自多个站点的数据,数据得到更新,并将其存储在融合表中。我们希望允许用户选择网站(下拉菜单网页)以查看不同的数据显示。我使用“数据表”使用Google Charts API找到了一个示例,但是canot让它工作我mofidfied并用它来显示另一种类型的数据表。但是,不能通过线图和条形图等其他图表来获取它。

<!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

1 个解决方案

#1

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

首先,建议使用loader.js加载谷歌图表,而不是旧库jsapi ...

next, there is a problem with the handleQueryResponse function.

接下来,handleQueryResponse函数存在问题。

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

handleQueryResponse通常是函数的名称,(参数)应该是响应

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>

#1