Google SpreadSheetを元にグラフを描く場合
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月1日現在)'}); } </script> </head> <body> <div id="chart_div_age"></div> </body> </html>