Google Chart Tools - スプレッドシート(表計算)で作成したグラフの公開

今回は Google スプレッドシートでグラフを作成し、公開する方法について紹介します。

今まで 12 回にわたり、 Google Chart Tools を使った JavaScript でのグラフの作成方法について説明して来ました。 サーバーサイドでデータをグラフ化する場合には、こちらの方法になると思います。
しかし、単にグラフを表示したいというだけであれば、 実はもっと簡単な方法があります。 それには Google スプレッドシート を利用します。

スプレッドシートというのは Google が提供している Web 上で使える表計算アプリケーションです。
ここでデータ、グラフを作成し、 作成したグラフをブログなどに貼り付けることができます。
これは作成されたコードを貼り付けるだけなので、 JavaScript の知識がなくても簡単に Google Chart Tools のグラフを使用することができます。

ただし、この方法だとローカルにあるファイル(file://...)ではグラフを表示することができません。

使い方

Google スプレッドシートでのグラフの作成と公開の仕方について説明していきます。
サンプルとしたスプレッドシートは以下のものです。
  1. データの作成
    まず、グラフにするデータを作成します。
    js_gct_sheet_data.png
    他の表計算アプリを使ったことがあれば、スプレッドシートもすぐ使えると思いますが、 一つ注意点があります。
    折れ線グラフのところで説明したように先頭列が数値か文字列かによってグラフが変わってきます。 このサンプルでは、横軸の値としたいのではなく、 データ項目として扱いたいので、 "年度" の列は文字列となるように ' で始めています。

  2. グラフの挿入
    グラフを作成する場合にはグラフにしたいデータの範囲を選択し、 [挿入] → [グラフ...] を選択します。
    js_gct_sheet_insert_graph.png

    グラフエディタでグラフの選択して、 [挿入] ボタンをクリックします。
    細かい設定は後から変更することができます。
    js_gct_sheet_graph_editor.png

    なお、スプレッドシートでのグラフ作成方法についてもっと詳しく知りたい場合は 以下のヘルプをご覧ください。
  3. グラフの公開
    グラフを選択し、 下三角を表示させて、 そこから [グラフを公開...] を選択します。
    js_gct_sheet_graph_public.png

    貼り付け用のコードが表示されるので、これを Ctrl-C でコピーして使用します。
    js_gct_sheet_graph_link.png
このサンプルのグラフを実際に貼りつけると次のようになります。

従来のスプレッドシートとの連携方法

Google Chart Tools とスプレッドシートの連携について、 今回初めて知ったという人はあまり関係ないかもしれませんが、 連携の方法について変更がありました。

従来はスプレッドシートと連携する場合にはQuery オブジェクトを使いました。 JavaScript 記述時に、これでスプレッドシートからデータを取得して、そのデータをグラフに使います。 データを取得する場合にはクエリー URL (データソース URL) というアドレスを必要とします。
クエリー URL はガジェット(Gadget)と呼ばれるグラフのようなものから取得するのですが、 この Gadget が廃止されることになりました。 連携では次のような方針転換があったようです。
  • (旧) ガジェット作成 → クエリー URL 取得 → Query によるデータの取得とグラフの作成を JavaScript で記述
  • (新) グラフ作成 → グラフ作成のコードを取得
内部的には貼り付け用のコードでもクエリー URL が使われているようですが、 今後は直接クエリー URL でデータを取得することはなくなると思います。

次は ?

今回で Google Chart Tools の説明は一応終了です。

ただし、 Google Chart Tools は今も活発に追加、修正されています。 また、興味あるものがでてきたら、記事を追加していきたいと思います。


関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
33位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
3位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

04月 | 2017年05月 | 06月
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。