Google SpreadSheetを元にグラフを描く場合 - popowa

Google Chart Toolsでグラフを作れるAPIがあるんだけど、そのデータをGoogle SpreadSheetを使って描写が出来るらしい、という事でやってみたら何点かハマったのでメモ。

sendMethodは無効にする
QueryのURLはhttpsに => https://spreadsheets.google.com/tq?key=ファイルID&gid=0
GeoChartは、最初のロードするパッケージに追加する => google.load("visualization", "1", {packages:["corechart", "geochart"]});

<html>
  <head>
    <meta charset="UTF-8">
    <title>日本の現状::2013年1月時点</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        //SpreadSheet
        var opts = {
          //sendMethod: 'xhr' #無効にする
        };
        var query = new google.visualization.Query(
　　　'https://spreadsheets.google.com/tq?key=0AqYMJut9ccjYdFBZeFFES1hhOVpVeTN1dm9KMUV3dXc&gid=0',
　　　opts);
        //URLはhttpsにする。ブラウザーで見ているURLと違うので要注意
        query.setQuery('SELECT A,C,D');
        query.send(handleQueryResponse);
      }

      function handleQueryResponse(response) {
        if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
        }
        var data_query = response.getDataTable();
        var lineChart = new google.visualization.LineChart(document.getElementById('chart_div_age'));
        lineChart.draw(data_query, {title: '年齢（各歳)/男女別人口−総人口（平成23年10月１日現在）'});
      }
</script>
</head>
<body>
<div id="chart_div_age"></div>
</body>
</html>