2016-06-29 14 views
0

私はGoogleスプレッドシートにあるデータを表すためにダッシュボードを作成しようとしていますが、私はできる限り最善の方法で(私はプログラマではありません)Googleのチャートガイドに従っています。私は下にあるスクリプトを思いついたので、うまくいきませんでした。Google視覚化スクリプトの問題

ここに私のスプレッドシートへのリンクです: https://docs.google.com/spreadsheets/d/1L2wjSj0IYSrA-dwYYly6rjmtw_zMCB6l7FB5B-rcvZc/edit#gid=1303777890

私は縦棒グラフは、(データ2)列DとE(ハイライト)のSheet2にあるとして表示しようとしている、と私はURLにその範囲を追加したデータクエリ "range=D:E"

私が思いついたコードは以下の通りです。私はちょうどチャートを表示するためにそれを取得したい。どんな助けもありがとうございます。

// Load the Visualization API and the corechart package. 
    google.charts.load('current', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(drawChart); 

    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 

function drawSheetName() { 
    var queryString = encodeURIComponent('SELECT D, E'); 

    var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1L2wjSj0IYSrA-dwYYly6rjmtw_zMCB6l7FB5B-rcvZc/edit#gid=1303777890range=D:E'); 
    query.send(handleSampleDataQueryResponse); 
} 

function handleSampleDataQueryResponse(response) { 
    if (response.isError()) { 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
    return; 
    } 

    var data = response.getDataTable(); 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, { height: 400 }); 
} 
} 

答えて

0

enter code here<html> 

は、私は問題を発見したと思います。

// Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(drawChart); 

    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 

function drawSheetName() { 
    var queryString = encodeURIComponent('SELECT D, E'); 

    var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1L2wjSj0IYSrA-dwYYly6rjmtw_zMCB6l7FB5B-rcvZc/edit#gid=1303777890range=D:E'); 
    query.send(handleSampleDataQueryResponse); 
} 

あなたはdrawSheetName()を使用しますがgoogle.charts.setOnLoadCallback()でそれを呼び出すことはありませんでした。

コードリビジョン

var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1L2wjSj0IYSrA-dwYYly6rjmtw_zMCB6l7FB5B-rcvZc/edit#gid=1303777890range=D:E'); 

変更のためのその後

google.charts.setOnLoadCallback(drawSheetName) 

形式

var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/ID/gviz/tq?tq='+queryString); 

クエリ言語リファレンスへ

Google Visualization APIクエリ言語を使用すると、クエリを使用してさまざまなデータ操作をデータソースに実行できます。

Setting the Query in the Data Source URL

クエリ文字列がtqパラメータを使用して、データ・ソースのURLに追加することができます。 JavaScriptではなくURLパラメータでクエリを設定すると、他の開発者が作成したビジュアライゼーションを簡単に使用でき、依然としてクエリをカスタマイズすることができます。

クエリ文字列は、URLパラメータとして正しくエンコードする必要があります。 JavaScript encodeURIComponent関数を使用してURLをエンコードすることも、このセクションの最後にあるエンコードツールを使用して手動でエンコードすることもできます。

:追加情報およびサンプルについて