Googleのグラフのクエリ結果をGoogleのグラフに渡す

複数のサイトからのデータがあり、データが更新されて融合テーブルに保存されます。私たちは、ユーザーが異なるデータプレゼンテーションを見るためにサイト（ドロップダウンメニューのWebページ）を選択できるようにしたかったのです。私はGoogle Charts APIを使って "Data Table"を使った例を見つけましたが、それを動作させて別のタイプのデータテーブルを表示するために使用しました。しかし、それは線グラフや棒グラフのような他のグラフを線でwokrにそれを得ることはできません。Googleのグラフのクエリ結果をGoogleのグラフに渡す

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

クエリは機能します（機能的な出力があります）。その出力を別の形式のグラフで使用する方法がわかりません。

おかげ

出典

2016-06-17 Roger Erismann

まず、対古いライブラリjsapi、ロードGoogleのグラフのloader.jsを使用することをお勧めします...次

、handleQueryResponse機能に問題があります。

handleQueryResponse

は、通常の関数の名前であり、そして (argument)は、それが何かのようでなければなりません

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

responseが存在しません、ここでresponse

、... ...あるべき

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

とにかくインラインで使用する場合、実際には名前は必要ありません。次の作業例を参照してください。

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>

出典

2016-06-17 11:51:41 WhiteHat

おかげで私はそれを行うにはどうすればよいの魅力 –

のように動作しますか？私はそれに投票したが、それは取るように見えない –

私はそれが公に表示するために十分な評判のポイントをthave！ –

Googleのグラフのクエリ結果をGoogleのグラフに渡す

答えて

関連する問題