Google图表将查询结果传递到Google图表

Question

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. 我使用“数据表”在Google Charts API中找到了一个示例，但无法使其正常工作，我将其修改并用于显示另一种类型的数据表。 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 谢谢

Answer 1

first, it is recommended to use loader.js for loading google charts, vs. the older library jsapi ... 首先，建议使用loader.js加载Google图表，而不是使用较早的库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通常是函数的名称， (argument)应为response

here, response will not exist... 在这里， response将不存在...

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>

Google图表将查询结果传递到Google图表

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-17 11:51:41

Google图表将查询结果传递到Google图表

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-17 11:51:41

解决方案1
2 已采纳 2016-06-17 11:51:41