まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを。参照していないものに関しては、コピペ改変まったく問いません

GoogleChartでスプレッドシートを使ってグラフを描く

GoogleChartでスプレッドシートを使って動的なグラフを描こうといろいろオベンキョウしてたときにハマったのでメモ。
ドットインストールを見つつやっていたのですが、Googleドライブになっていろいろ設定が変わったようで。
コードはドットインストールと変わらないのですが、セルのデータを読み込むときのアドレスの生成が変わったようです。
ドットインストールで紹介されているコードはこちらを参考にして頂くとして、変更部分のURL生成部分のメモです。


1.シートをつくる(数値を文字列にするときは’2005というように打つ)
2.ファイル→Webに一般公開
3.そのときのURLのd/の後ろから/pubhtmlの前までをコピー
URLが「https://docs.google.com/spreadsheets/d/1NstmAvBzzKjU9FfGHmbVqv6SChYamvm2CXNf3imwyfg/pubhtml」だとすると、「1NstmAvBzzKjU9FfGHmbVqv6SChYamvm2CXNf3imwyfg」をコピー
4.「https://spreadsheets.google.com/tq?key=コピーした文字列&gid=0」とブラウザに入力し、データの固まりが表示されるか確認する
https://spreadsheets.google.com/tq?key=1NstmAvBzzKjU9FfGHmbVqv6SChYamvm2CXNf3imwyfg&gid=0」とプラウザに入力
5.「var query = new google.visualization.Query(URL);のURLのところに、4.のURLをコピペする

3.のURLがクセモノです。グラフ描画後のURLではなく、数値を入力してWeb公開した後のアドレスなことに注意。「1NstmAvBzzKjU9FfGHmbVqv6SChYamvm2CXNf3imwyfg」はどうやら個別IDなようです。

ちなみにWordpressに挿入するときは、
1.HTMLファイル作成
2.サーバーにアップ
3.で表示されます。
グラフにマウスを持っていくと、ちゃんとラベルも表示されます。上記のURLのようにスプレッドシートを使ってグラフの表示もOK。