wcan winter2015 lt hayashida

今わたしが使いたいツールGoogle Chart Tools

トライデントコンピュータ専門学校Webデザイン学科　１年

林田 実樹

林田 実樹 - はやしだ みき -

トライデントコンピュータ専門学校 Webデザイン学科

プロフィール

好きなこと　→　ゲーム、寝る事

アルバイト中

ブログ　→　http://miki-weblog.com

子猫２匹

飼っています

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 月

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

“Excel”

画像でしか載せられない

データの変更がめんどう

グラフのサイズを変更できない

Excalの難点

“Google Chart Tools”

JavaScriptで記述するSVGを使ったグラフツール

Google Chart Tools とは

データの書き換えも楽

マウスをのせると詳細が見れる

サイズ・色の変更が可能

表との連動ができる

フィルタリングができる

Google Chart Tools のメリット

円グラフ　　　　　縦棒グラフ　　　　　 横棒グラフ

　　　　　　　　 折れ線グラフ　　　 面グラフ　　　　　　　　

　　 　 　　　　　　　　　 複合グラフ・階段グラフ・散布図 など

7%8%10%11%

29%

35%

0255075100

4 月 5 月 6 月 7 月

4 月5 月6 月7 月

0 25 50 75 100

0255075100

4 月 5 月 6 月 7 月 07.51522.530

0 4 8 12 160255075100

4 月 5 月 6 月 7 月

バブルチャート

Google Chart Tools 一般的なグラフ

ローソク足　　　　　　　　　　ゲージメーター

地図チャート　　　　　　　　　ツリーマップ

　　　　　　　　　　　　　　　　　　　　表（テーブル）など

Google Chart Tools 特殊なグラフ

<script src=“ https://www.google.com/jsapi “></script>

google.setOnLoadCallback(drawChart);

↑　GoogleのサイトからAjax APIのロードをする

↑　ロード時のコールバック関数の設定

google.load('visualization', '1', {packages:[‘corechart']});

Google Chart Tools

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

Google Chart Tools

// ============= オプションの指定 ================= var options = { title: 'キャラ（メイン使用）', width: 1200, height: 800, colors: [‘#0F0','#F00'], backgroundColor: '#eee' };

サイズ・色の変更

←グラフの背景←グラフ内のチップの色

Google Chart Tools

var chart = new google.visualization.ColumnChart(document.getElementById(‘character’));縦棒グラフ

Google Chart Tools

<div id=“character"></div> HTML上 ・空のdivを用意する ・IDをつける

chart.draw(data, options);

Google Chart Tools

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（地図チャート）

Googleサイトからjsapiの読み込み

コールバック関数の設定

パッケージの読み込み

配列の宣言とデータの格納

オプションの指定

グラフのオブジェクトの作成

グラフの描画

Google Chart Tools

地図上にバブルを配置できる

Google Chart Tools だけの機能

ネットが繋がる環境では扱いやすいグラフ

初心者から上級者まで簡単に作れる

Excelにはない機能が実装可能

Google Chart Tools のまとめ

http://miki-weblog.com

miki’s weblog

詳しくはブログに……！

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