Google Chart Tools

今回 WCAN winterのライトニングトークで紹介した「Google Chart Tools」
についての詳しい内容のまとめです。

Google Chart Toolsとは

Java Script(以下JS)で記述するSVGを使ったGoogleのグラフツールです。
JSで直接グラフを描画するという方法もありますが、その方法では手間がかかります。
しかし、Google Chart Toolsなら書く形式が決まっているため手間が省け、JSがわからない人にもグラフの描画が可能です。

Excelとはどう違うの？

グラフ作成ではExcelが主流ではないかと思います。
関数がわかれば簡単にテーブルやグラフが作成でき便利です。
しかし、Web上にグラフを載せる際にはキャプチャをとり、画像で載せるため表示サイズの変更や、データの変更の際には再度Excelを開き、キャプチャをとるという手間がかかります。
その手間がかからないのがGoogle Chart Toolsです。

Google Chart Toolsの特長

• 表との連携が可能
  データを共有し、イベント機能を使い連携が可能
• フィルタリングで絞り込める
  Dashboards 、Controlを使いフィルタリングが可能
• 表示サイズ、色などの変更が容易
• データの書きかえが容易
• hoverでデータの詳細表示機能が標準でついている
  画像でのグラフではできない機能でインタラクティブなグラフが作成できる。

作成できるグラフ

一般的なグラフから特殊なグラフまで14種類の作成が可能です。
（のちのちグラフごとの作成方法を記事として書いていきます。）

・円グラフ　　　　・棒グラフ
・横棒グラフ　　　・折れ線グラフ
・面グラフ　　　　・バブルチャート
・複合グラフ　　　・階段グラフ
・散布図　　　　　・ローソク足
・ゲージメーター　・地図チャート
・ツリーマップ　　・表（テーブル）

グラフの作成

Google サイトから読み込み

Googleのサイトからjsapiを読み込みます。
headタグ内でscriptタグを使用し読み込みます。type属性は必要ありません。

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

パッケージの読み込み

グラフ作成に必要なパッケージを下記の記述で読み込みます。
google.load()で読み込みが行われます。
Googleサイト内のvisualizationライブラリからcorechartというパッケージを読み込みます。
（「1」はvisualizationライブラリのバージョン情報になります。）
この文は自分での変更点はないたく、決まりとして決まっているものです。

<script>
google.load('visualization', '1', {packages:['corechart']});
</script>

コールバック関数の設定

パッケージの読み込み終了後にグラフの処理をしないと不具合の元になるため、
それをさけるためにパッケージの準備完了後に関数からグラフの処理を呼び出すように設定します。
関数は自作の関数となるため自由につけれます。

google.setOnLoadCallback(関数名);

データの格納

データの格納はfunction 関数名 ()で行います。
ここの関数名は先程設定したコールバック関数を記述します。
データ格納のためにvarで配列を宣言します。宣言時の関数名は任意で設定できます。

「google.visualization.arrayToDataTable」を使うことでデータの格納ができます。この文は決まり文なので変更は必要なく、任意の設定場所もありません。

function 関数名(){
var 配列名 = google.visualization.arrayToDataTable([
['見出し1',   '見出し2',   '見出し3'],
|s|        //各見出しに対するデータを見出し下に記述
]);

[ ]内でカンマで区切ります。
データの1番最初には各列の見出しを入力することが必須となっています。見出しを書かずに数値を書いた場合はエラーとなりグラフが形成されません。
見出し以降は同じ書き方で、数値などのデータを入力します。

グラフの詳細設定(オプション)

冒頭で説明したとおり、Google Chart Toolsではグラフのサイズ変更などのオプションが指定できます。
varでオブジェクトを宣言します。オブジェクト名は任意です。

var オブジェクト名 = {
|s|        title: 'グラフのタイトル名',
|s|        width: 800,
|s|        height: 500,
|s|        colors: [‘#0F0','#F00'],
|s|        backgroundColor: '#eee'
};

上は指定できるオプションの例を5つ記述しました。他にもたくさんあります。

colorsはグラフのチップ色となります。カンマで区切ることでいくつもの色を指定できます。
指定なしの場合はデフォルトの色で表示されます。
指定する場合はデータの項目数分の色の指定をおすすめします。
データ項目が4つの場合に2つしか色を記述しないと、チップは交互に色が変わるため、データの奇数、偶数で同じ色になり、データが分かりにくくなります。

このオブジェクトは書かなくてもグラフ自体は表示されます。

グラフ描画場所の指定

HTML上には空divを用意しIDをつけておきます(classでも大丈夫です)
document.getElementByIdで描画場所であるdivを指定します。
varでグラフのオブジェクトを宣言し、生成します。

var グラフのオブジェクト名 = new google.visualization.グラフごとの関数(document.getElementById(‘divのID’));

class名で描画したい場合は通常のJavaScriptと同様でdocument.getElementsByClassNameに変更してください。

各グラフの関数は下記になります。

グラフの描画

先程決めたグラフのオブジェクト名に「draw」という関数を実行することでグラフの描画がされます。
draw()内には配列名とグラフの詳細設定のオブジェクト名を記述します。
titleやwidthなどのオプションを指定していない場合は配列名だけで大丈夫です。

グラフのオブジェクト名.draw(配列名, オブジェクト名);

あとがき

今回の記事はWCAN winterのライトニングトークの内容に詳細な説明をつけたしたものになります。