WCAN winter2015のライトニングトークでの 「今わたしが使いたいツール Google Chart Tools」でのスライドになります。 （ライトニングトーク時とは画像など違う点も少々あります）

1. 今わたしが使いたいツール
Google Chart Tools
トライデントコンピュータ専門学校
Webデザイン学科 １年
林田 実樹

2. 林田 実樹
- はやしだ みき -
トライデントコンピュータ専門学校 Webデザイン学科
プロフィール
好きなこと → ゲーム、寝る事
アルバイト中
ブログ → http://miki-weblog.com
子
猫
２
匹
飼
っ
て
い
ま
す

3. 7%
8%
10%
11%
29%
35%
0
7.5
15
22.5
30
0 4 8 12 16
0
25
50
75
100
4 月 5 月 6 月 7 月
4 月
5 月
6 月
7 月
0 25 50 75 100
0
25
50
75
100
4 月 5 月 6 月 7 月

4. みなさんはどのように
グラフを作成しますか？

5. Excel

6. 画像でしか載せられない
データの変更がめんどう
グラフのサイズを変更できない
Excalの難点

7. Google Chart Tools

8. JavaScriptで記述する
SVGを使ったグラフツール
Google Chart Tools とは

9. データの書き換えも楽
マウスをのせると詳細が見れる
サイズ・色の変更が可能
表との連動ができる
フィルタリングができる
Google Chart Tools のメリット

10. 円グラフ 縦棒グラフ 横棒グラフ
折れ線グラフ 面グラフ
複合グラフ・階段グラフ・散布図 など
7%
8%
10%
11%
29%
35%
0
25
50
75
100
4 月 5 月 6 月 7 月
4 月
5 月
6 月
7 月
0 25 50 75 100
0
25
50
75
100
4 月 5 月 6 月 7 月
0
7.5
15
22.5
30
0 4 8 12 16
0
25
50
75
100
4 月 5 月 6 月 7 月
バブルチャート
Google Chart Tools 一般的なグラフ

11. ローソク足 ゲージメーター
地図チャート ツリーマップ
表（テーブル）など
Google Chart Tools 特殊なグラフ

12. <script src= https://www.google.com/jsapi ></script>
google.setOnLoadCallback(drawChart);
↑ GoogleのサイトからAjax APIのロードをする
↑ ロード時のコールバック関数の設定
google.load('visualization', '1', {packages:[ corechart']});
Google Chart Tools

13. function drawChart(){
// ==================== データ指定 ====================
var data = google.visualization.arrayToDataTable([
['キャラ名', 'HP', '攻撃力'],
['キャラA', 588, 364],
['キャラB', 523, 238],
['キャラC', 529, 216],
['キャラD', 254, 221]
]);
Google Chart Tools

14. // ============= オプションの指定 =================
var options = {
title: 'キャラ（メイン使用）',
width: 1200,
height: 800,
colors: [ #0F0','#F00'],
backgroundColor: '#eee'
};
サイズ・色の変更
←グラフの背景
←グラフ内のチップの色
Google Chart Tools

15. var chart =
new google.visualization.
ColumnChart(document.getElementById( character ));
縦棒グラフ
Google Chart Tools
<div id= character"></div>
HTML上
・空のdivを用意する
・IDをつける

16. chart.draw(data, options);
Google Chart Tools

19. HTML上
・空のdivを用意する
・IDをつける
var chart =
new google.visualization.
ColumnChart(document.getElementById( character ));
縦棒グラフ
Google Chart Tools
<div id="character"></div>
例：
LineChart（折れ線グラフ）
PieChart（円グラフ）
BarChart（横棒グラフ）
Gauge（ゲージーメーター）
ComboChart(複合グラフ)
AreaChart（面グラフ）
GeoChart（地図チャート）

20. Googleサイトからjsapiの読み込み
コールバック関数の設定
パッケージの読み込み
配列の宣言とデータの格納
オプションの指定
グラフのオブジェクトの作成
グラフの描画
Google Chart Tools

21. 地図上にバブルを配置できる
Google Chart Tools だけの機能

22. ネットが繋がる環境では扱いやすいグラフ
初心者から上級者まで簡単に作れる
Excelにはない機能が実装可能
Google Chart Tools のまとめ

23. http://miki-weblog.com
miki s weblog
詳しくはブログに……！

24. ご清聴ありがとうございました！