× 無料のユーザー登録をすると学習状況を管理することができるようになります

Google Chart Tools入門 (全12回)

GoogleのChart Tools APIを使い、JavaScriptでインタラクティブかつ綺麗なグラフを描画する方法を学びます。

#01 Google Chart Toolsの紹介
2012年1月14日
このレッスンを理解するには、HTML、JavaScriptを先に学習しておくことをおすすめします。
・HTMLの基礎
http://dotinstall.com/lessons/basic_html
・JavaScriptの基礎
http://dotinstall.com/lessons/basic_javascript
2012年1月13日
Google Chart Toolsの公式サイトはこちらからどうぞ。
http://code.google.com/apis/chart/
#03 円グラフのデータを用意する
2012年1月26日
動画では以下のように配列の最後の要素「['仕事', 12]」の後ろにカンマがついていますが、
data.addRows([
  ['睡眠', 12],
  ['仕事', 12],
]);
これだとIEではエラーになります。(IE以外ではエラーになりません。)
なので、IEでも動作させたい場合は配列の末尾にはカンマをつけないようにします。
data.addRows([
  ['睡眠', 12],
  ['仕事', 12]
]);
これはオブジェクト(JSON)の場合も同様です。
2012年1月13日
円グラフ(PieChart)の設定オプション、サンプル、その他の詳細はこちらにあります。
http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
#06 横棒グラフを描画する
2012年1月13日
横棒グラフ(BarChart)の設定オプション、サンプル、その他の詳細はこちらにあります。
http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html
#07 縦棒グラフを描画する
2012年1月13日
縦棒グラフ(ColumnChart)の設定オプション、サンプル、その他の詳細はこちらにあります。
http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html
#08 折れ線グラフを描画する
2012年1月13日
折れ線グラフ(LineChart)の設定オプション、サンプル、その他の詳細はこちらにあります。
http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html
#09 Googleスプレッドシートと連動させる
2016年2月23日
動画中で説明している「ガジェット」はすでに廃止されています (ユーザーの方よりご指摘いただきました)。代わりに以下の方法でスプレッドシートと連携することができます。

1. Googleスプレッドシートを公開するまでは動画の通りおこなってください。
2. スプレッドシートの URL の末尾にある /edit 以下を /gviz/tq に置き換えます。
例) https://docs.google.com/spreadsheets/d/[スプレッドシートのID]/gviz/tq
3. この URL を google.visualization.Query() の引数に渡します。(ソースコード中の「取得したURL」の部分)

オプションのパラメータ指定など、より詳しくは https://developers.google.com/chart/interactive/docs/spreadsheets?csw=1 の「Creating a Chart from a Separate Spreadsheet」をご覧ください。
2012年1月13日
Googleスプレッドシートとの連携についての詳細は以下のページに詳しいです。
http://code.google.com/apis/chart/interactive/docs/spreadsheets.html
#12 Google Image Chartsについて
2012年1月13日
Google Image Chartをウィザード形式で作成するにはこちらからどうぞ。
http://code.google.com/apis/chart/image/docs/chart_wizard.html
2012年1月13日
Google Image Chartについてはこちらをご覧ください。
http://code.google.com/apis/chart/image/