Google Spreadsheetsからデータを取得してグラフを描画する方法の続編

https://hacknote.jp/archives/10712/

でGoogle Spreadsheetsからデータを取得してグラフを描画する方法を書きましたが、追加情報があるので補足しておきます。

新しい Google スプレッドシートについて

Google SpreadsheetsとGoogle Driveが連携したことにより、新しい Google スプレッドシートが使えるようになりました。

URLからどちらか判断することができます。

旧バージョン

https://docs.google.com/spreadsheet/ccc?key=XXX

新バージョン

https://docs.google.com/spreadsheets/d/XXX

このページが説明がわかりやすいです。

http://blog.ecoteki.com/webservice/post-2458/

新機能について

新しい Google スプレッドシートになって変わったところは以下にまとまっています。

https://support.google.com/docs/answer/3541068?hl=ja

既存のスプレッドシートから新しいスプレッドシートへの移行方法

https://support.google.com/docs/answer/6082736?p=old_sheets_migrate&rd=1

既存のスプレッドシートは2014～2015 年の間に順次新しいスプレッドシートへ移行が行われますが、それまで待てない、という方は以下の方法で手動にて移行ができるようです。

https://support.google.com/docs/answer/3544847

URLについて

上記を踏まえた上で

google.visualization.Query

に指定するURLの生成を考えてみます。

新バージョンの場合

https://developers.google.com/chart/interactive/docs/spreadsheets#sheet-name

にある例をそのまま使えばOKです。

旧バージョンの場合

http://webos-goodies.jp/archives/51310352.html

の「データソース URL について」を参考にします。

http://spreadsheets.google.com/tq?key=XXX&gid=0&range=A1:AZ4&pub=0

みたいなURLになるかと思います。

DataTableで使える関数

公式ドキュメントはこちらになります。

https://developers.google.com/chart/interactive/docs/reference#DataTable_getProperties

日本語はこのサイトが見やすかったです。

http://so-zou.jp/web-app/tech/web-api/google/chart/interactive/data-table.htm

DataTableで行/列を入れ替える方法

残念ながら「行/列を入れ替える」方法はDataTableの関数にも、google.visualization.Queryの引数指定にもありません。

手作業で頑張るしかありません。この辺りを参考にしました。

https://groups.google.com/forum/#!topic/google-visualization-api/d_0XLvCEOFs

http://jsfiddle.net/RzfRx/55/

            function transpose(dataTable) {
                var transposed = new google.visualization.DataTable();
                transposed.addRows(dataTable.getNumberOfColumns());
                transposed.addColumn('string', 'days');
                for (var col = 0; col < dataTable.getNumberOfColumns(); col++) {
                   for (var row = 0; row < dataTable.getNumberOfRows(); row++) {
                       if (col === 0) {
                           transposed.addColumn('number', dataTable.getValue(row, col));
                       } else {
                       if (row === 0) {
                           transposed.setCell(col, row, dataTable.getColumnLabel(col));                   
                       }
                           transposed.setCell(col, row + 1, dataTable.getValue(row, col));
                           transposed.setFormattedValue(col, row + 1, dataTable.getFormattedValue(row, col));
                       }
                   }
               }
               return transposed;
           }