GoogleビジュアライゼーションAPIのスプレッドシートの表を使用

通常はGoogleスプレッドシートにデータがあり、GoogleビジュアライゼーションAPIでデータを表現したいと考えています。
2つの例からコードを再現しようとしましたが、失敗しました。
例1：datatables and dataview docs
例2：how to use google spreadsheets docs
GoogleビジュアライゼーションAPIのスプレッドシートの表を使用

<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

    google.charts.load('current', {packages: ['corechart', 'bar']}); 
    google.charts.setOnLoadCallback(drawBasic); 

    function drawBasic() { 

    function drawGID() { 
    var queryString = encodeURIComponent('SELECT A, B'); 
    var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq=' + queryString); 
     query.send(handleQueryResponse); 
    } 

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

     var data = reponse.getDataTable(); 

     var options = { 
     title:'test',  
     } 

     var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
     chart.draw(data,options) 
    } 
    } 

    </script> 
    </head> 
    <body> 
    <h1> will it works </h1> 
    <div id="chart_div"></div> 
    </body> 
</html>

出典

2016-09-14 mizolm

そこにコードをラップ機能drawGIDがあると呼び出されることはありません、

それを削除...

EDITを

変更されたURL、

はほかに、タイプミスを発見し、同様setQueryを使用して - >var data = reponse.getDataTable();

reponseはする必要があります

が作業スニペットを次のように表示response ...

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

 
function drawBasic() { 
 
    var query = new google.visualization.Query(
 
    'https://docs.google.com/spreadsheets/d/1FzvV_rh81koInXeZp6LfXmZb6YGwKDB3CU20RdVOfjc/edit#gid=0' 
 
); 
 
    query.setQuery('SELECT A, B'); 
 
    query.send(handleQueryResponse); 
 
} 
 

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

 
    var data = response.getDataTable(); 
 
    var options = { 
 
    title: 'test' 
 
    } 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options) 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

出典

2016-09-14 21:47:28 WhiteHat

の構文についてはgoogle query langageを参照してください...上記 – WhiteHat

おかげ__EDIT__を参照してください！ 'set.Query'は読みやすくなります...そのタイプミスで申し訳ありません – mizolm

歓声！私はURLに問題がありました。 'setQuery'は、ブラウザでスプレッドシートを表示しているのと同じURLをコピーすることができます... – WhiteHat

ここでは、 w google chart APIドキュメント内のquick start example。他にも解決策がありますが、これは非常に読みやすいです。
スプレッドシートのURL（）の末尾に注意してください、そしてquery.setQuery

<html> 
    <head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/edit#gid=0' 
    ); 
    query.setQuery('SELECT A, B OFFSET 5'); //select specific cells from the table 
    query.send(handleQueryResponse); 
    } 

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

    var data = response.getDataTable(); 
    var options = { 
     title: 'glue data from spreadsheet', 
     height : 250, 
    } 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options) 
    } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

出典

2016-09-15 10:24:45 mizolm

GoogleビジュアライゼーションAPIのスプレッドシートの表を使用

答えて

関連する問題