Google Chart Tools の使い方

いろんなグラフがかける Google Chart Tools の使い方について書いてみました。

今回は Google Chart Tools の紹介と基本的な使い方の説明です。

Google Chart Tools とは
グラフの種類
ライセンス
使い方
オプション

Google Chart Tools とは

Google Chart Tools は SVG を使ったグラフを表示するツールで、 JavaScript で記述します。

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">
   google.load("visualization", "1", {packages:["corechart"]});
   google.setOnLoadCallback(drawChartSamplePie);
   function drawChartSamplePie() {
     var data = google.visualization.arrayToDataTable([
       ['タスク', '時間'],
       ['仕事', 11],
       ['食事', 2],
       ['通勤', 2],
       ['TV 鑑賞', 2],
       ['睡眠', 7]
     ]);
 
     var options = {
       title: 'Google Chart Tools サンプル',
       is3D: true
     };
 
     var chart = new google.visualization.PieChart(document.getElementById('gct_sample_pie'));
     chart.draw(data, options);
   }
 </script>
 <div id="gct_sample_pie" style="width: 400px;"></div>

ただし、ブログ上でちょっと表示させたいといった時には、表計算の Web アプリケーションである Google スプレッドシートを使えば、 JavaScript の知識なしでも簡単にグラフを表示させることができます。
そちらの方法に関しては以下の記事をご覧下さい。

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

旧機能からの変更

Google Chart は一度変更がありました。
以前のものはパラメーターを GET メソッド(http のアドレス)として渡して画像でグラフを作成するツールでした。

https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

これは Image Charts という名前になっていて、まだ利用できるのですが、 Deprecated(望ましくないもの) となっています。
Image Charts は 3D など表示に関しては高機能なのですが、次のような欠点があります。

http のアドレスで渡すため、256 文字の制限がある
画像なので、マウスオーバーなどに反応しない

これらの欠点が SVG, JavaScript を使うことによって改良されています。
ただし、変わったといっても Image Charts を JavaScript から作成することも可能ですし、 SVG の円グラフ(Pie chart)も 3D 表示が可能です。

また、画像と違い、 SVG の描画はブラウザーが行います。ブラウザーはまず日本語対応しているでしょうから、グラフ中で問題なく日本語が使用可能です。

JavaScript の関数は Google Visualization(可視化) API として公開されています。
Google Chart Tools の目的も前は単にグラフを作成することでしたが、今はデータベース等から取得したデータを可視化する というところに移ったようです。

特徴

JavaScript を使ったグラフ作成ライブラリはいろいろありますが、他と比べた Google Chart Tools の一番の利点はインタラクティブ性の高さでしょう。
マウスに対する反応だけでなく、表との連動やフィルターなどを簡単に書くことができます。

逆に欠点は JavaScript のソースをダウンロードして使用することができないことです。このため社内 LAN などのイントラネットの Web サービスでも、必ず Google のサイトにアクセスしに行かなければなりません。

Frequently Asked Questions #offline - Google Chart Tools — Google Developers

Google のサイトはアクセスが速いので、インターネット上で公開する Web サービスでは問題ではありませんが、イントラネットの場合は速度の低下の要因になる可能性があります。
また、ネットに繋がらないオフラインの環境では表示することもできません。

さらに一部の動きのあるグラフはセキュリティ上、ローカルファイル(file://..)では動作しないようになっています。

これらの欠点はなかなか大きいのですが、それを差し引いたとしても使用を検討する価値はあると思います。

グラフの種類

Google Chart Tools では様々なタイプのグラフが使用できます。

どのようなグラフが使用出来るかは Charts Gallery を見て下さい。

Charts Gallery には出ていませんが、それ以外にも使えるグラフが少しあります。こちらは Code Playground や Additional Charts Gallery に載っています。

ライセンス

Google Chart Tools は商用利用も OK です。

Frequently Asked Questions # commercial use - Google Chart Tools — Google Developers

ただ、詳細は Google Visualization API の Terms of Service ページを見てということなので、実際に商用利用する場合は次のページを見て判断して下さい。

しかし、Map や Geochart といった図は Google Maps API を使用しています。
こちらは有料、無料版があり、無料版には使用制限があリます。 Google Maps API の利用規約に従って使用して下さい。

よくある質問 # Google Maps API の利用規約 - Google Maps API — Google Developers

使い方

グラフの基本的な使用法を折れ線グラフ(Line chart)を例に説明します。

<html>
  <head>

    <!-- AJAX API のロード -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Visualization API と折れ線グラフ用のパッケージのロード
      google.load("visualization", "1", {packages:["corechart"]});

      // Google Visualization API ロード時のコールバック関数の設定
      google.setOnLoadCallback(drawChart);

      // グラフ作成用のコールバック関数
      function drawChart() {

        // データテーブルの作成
        var data = google.visualization.arrayToDataTable([
          ['年度', '売上', '費用'],
          ['2004',  1000,  400],
          ['2005',  1170,  460],
          ['2006',  660,   1120],
          ['2007',  1030,  540]
        ]);

        // グラフのオプションを設定
        var options = {
          title: '会社業績'
        };

        // LineChart のオブジェクトの作成
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        // データテーブルとオプションを渡して、グラフを描画
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- グラフを描く div 要素 -->
    <div id="chart_div" style="width: 80%; height: 400px;"></div>
  </body>
</html>

グラフを表示するためには次の 3 つのものが必要です。

Google Chart の JavaScirpt ファイルのロード指定
前述したように JavaScirpt のファイルは Google のサイトにあるものを使用します。
Google では Google Hosted Libraries という JavaScript のライブラリーを公開しているサービスがあります。これは Google 製のライブラリーだけでなく、 JQuery、 Dojo といったよく使われているライブラリーの利用でき、様々な利点があります。
- Google Hosted Libraries の紹介 | いるすの備忘録
- Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 – | HTML5Experts.jp
実際のロードはスクリプト内の google.load() で行うのですが、まず、この関数を使えるようにするファイルをロードします。
```
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
```

グラフ作成のスクリプトの記述
<header> 部などにどのようなグラフにするかを記述します。
内容は次節で説明します。

    <script type="text/javascript">
       google.load("visualization", "1", {packages:["corechart"]});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
         // グラフ作成
         //       :
       }
    </script>

グラフを描画する div 要素
グラフを描画するところには ID 名をつけた div 要素を置きます。
```
<div id="chart_div" style="width: 80%; height: 400px;"></div>
```
グラフのオプションで幅や高さを指定することもできるのですが、省略時にはこの div 要素のサイズでグラフを作成します。 div 要素ではサイズ指定に 80% のような指定ができるので、 ページ幅に合わせたグラフの作成が簡単に行えます。
ただし、そのままではブラウザーのサイズ変更してもサイズは変わりません。
- 動的なグラフの変更

グラフ作成のスクリプト

グラフ作成用のスクリプトの内容について解説します。

まず、グラフを作成するのに必要なパッケージをロードします。

      // Visualization API と折れ線グラフ用のパッケージのロード
      google.load("visualization", "1", {packages:["corechart"]});

corechart の部分がグラフの種類によって変わってきます。
どのパッケージを指定するかは各グラフの説明で確認して下さい。 Chart Gallery にでている基本的なグラフはだいたい corechart です。

なお、 google.load には同じファイルをロードしない仕組みがあるので、同一ページに複数のグラフを作成する場合などで、何度呼んでも問題ありません。

次にグラフ作成用の関数定義とその関数の登録を行います。

      // Google Visualization API ロード時のコールバック関数の設定
      google.setOnLoadCallback(drawChart);

      // グラフ作成用のコールバック関数
      function drawChart() {
        // グラフ作成
      }

drawChart の関数名は任意ですが、 1 ページに複数のグラフを描画する場合には名前が被らないようにして下さい。

無名関数として登録することもできます。

 google.setOnLoadCallback(
     function() {
         // グラフ作成
     }
 );

グラフ作成の関数

グラフ作成用の関数内ではさらに 3 つのことを行います。

データの作成
オプションの設定
グラフの描画

drawChart 関数内:

        // データテーブルの作成
        var data = google.visualization.arrayToDataTable([
          ['年度', '売上', '費用'],
          ['2004',  1000,  400],
          ['2005',  1170,  460],
          ['2006',  660,   1120],
          ['2007',  1030,  540]
        ]);

        // グラフのオプションを設定
        var options = {
          title: '会社業績'
        };

        // LineChart のオブジェクトの作成
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        // データテーブルとオプションを渡して、グラフを描画
        chart.draw(data, options);

データは google.visualization.DataTable のオブジェクトとして作成します。
サンプルでは arrayToDataTable 関数を使って二次元の配列から作成しています。

        var data = google.visualization.arrayToDataTable([
          ['年度', '売上', '費用'],
          ['2004',  1000,  400],
          ['2005',  1170,  460],
          ['2006',  660,   1120],
          ['2007',  1030,  540]
        ]);

グラフのオプションはオブジェクト(連想配列)で指定します。
指定可能な要素は title のようなグラフで共通のものや円グラフの is3D といった特定のグラフで固有のものがあります。

        var options = {
          title: '会社業績'
        };

グラフの描画ではまず対象グラフのオブジェクトを作成します。
この際、描画先の div 要素を ID 名から取得して渡します。

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

最後に作成したデータとオプションを渡して、描画を行います。

chart.draw(data, options);

グラフ作成の関数(簡易版)

グラフ作成の関数定義は Chart Wrapper を使って、もう少し簡単に書くことができます。
Chart Wrapper では先ほどのグラフ作成で必要だったものをオブジェクト(連想配列)の形で用意します。

要素	キー名	格納値
グラフの種類	chartType	グラフのクラス名
データ	dataTable	データテーブルの元となる二次元配列
オプション	options	オプション設定のオブジェクト
対象の div 要素	containerId	div 要素の ID 名

function drawChart() {
    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        dataTable: [
            ['年度', '売上', '費用'],
            ['2004',  1000,  400],
            ['2005',  1170,  460],
            ['2006',  660,   1120],
            ['2007',  1030,  540]
        ],
        options: {title: '会社業績'},
        containerId: 'chart_div'
    });
    wrapper.draw();
}

オプション

グラフで共通なオプションのうち、よく使いそうなものを幾つか紹介します。
ただし、共通といっても表、円グラフといった特殊な形状のものは除きます。詳細は各グラフの説明を見て下さい。

なお、表内で型が Object になっている項目は入れ子でオプションを指定します。

var options = {
    title: "グラフのタイトル",
    hAxis: {
        title: "横軸のタイトル"
    }
}

名称	型	デフォルト	説明
backgroundColor	string or object	'white'	背景色。色の指定方法は HTML と同じです。
colors	strings の配列	デフォルトの配色	線などのグラフの要素を配列で指定します。
height, width	number	グラフの格納先要素のサイズ	グラフの高さ、幅
legend	Object	null	判例
.position	string	'right'	判例の位置 'right' - 右 'top' - 上 'bottom' - 下 'in' - グラフ内(左上) 'none' - 非表示
title	string	非表示	タイトルの文字列
hAxis, vAxis	object または object の配列	null	横軸、縦軸(後述)

hAxis, vAxis でグラフの横(メイン)軸、縦軸の設定を行います。各軸の設定項目はほぼ同じものです。

名称	型	デフォルト	説明
baseline	number	自動	グラフの補助線の表示する数を指定します。補助線の詳細は gridlines で指定し、 gridlines の間隔で丸められます。ただし、横軸の場合、データを数値として扱っていないと補助線は表示されません。折れ線グラフ、面積グラフ
baselineColor	string	'black'	補助線の背景色。色の指定方法は HTML と同じです。 `'none'` を指定すると補助線は非表示となります。
format	string	自動	軸の値のラベルを表示する際のフォーマット。数値または日時の ICU パターンで指定します。例えば、 10, 7.5, 0.5 の値で `{format:'#,###%'}` と指定すると、 "1,000%", "750%", and "50%" と表示されます。日付の場合、 `{format:'y 年 MM 月 dd 日(E)'}` と指定すると、 "2013 年 01 月 27 日(日)" といった表示になります。
gridlines	Object	null	補助線。
.color	string	'#CCC'	補助線の色を指定します。
.count	number	5	グラフ内の補助線の数を指定します。(最小は 2)
minorGridlines	Object	null	より細かいサブ補助線。
.color	string	gridlines と背景色の混合	サブ補助線の色
.count	number	0	補助線間に表示するサブ補助線の数を指定します。
logScale	boolean	false	軸の表示を Log スケールで表示します。等比級数的に増加するデータの表示などで使用します。
title	string	null	軸のタイトル。
slantedText	boolean	自動	(横軸用) `true` の場合には値のラベルが入りきらない場合に、角度を付けて表示します。 `false` では上下に段を分けて表示します。
viewWindow	Object	null	グラフの表示領域を指定します
.max	number	自動	表示領域の最大値
.min	number	自動	表示領域の最小値

関連記事

スポンサーサイト

Prev. Category Next

trackback

Google Chart Tools の使い方

自分のための備忘録。ＱＭ３３　は　画像をキャプチュアしたサンプル。...

2016-04-13 18:58 |
Coolに過ごそう

新規トラックバック

この記事にトラックバックする(FC2ブログユーザー)

Facebook コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2013-12-26 12:49 |
|
編集

Re: No title

hAxisとhAxesが混在しているというご質問があったのですが、
Axis の複数形が Axes です。
参考にした Google の説明ページでもどっちも出ていましたが、
オプションで指定する場合には hAxis となります。
記事では Axis の方で統一するように修正しました。

2013-12-27 02:20 |
yohshiy URL |
編集

利用規約について

Google Chartの利用規約は、かいつまんで言うとどのようなことが書かれているのか
教えていただけないでしょうか？

2015-09-30 17:34 |
yuu URL |
編集

Re: 利用規約について

> Google Chartの利用規約は、かいつまんで言うとどのようなことが書かれているのか
> 教えていただけないでしょうか？

ライセンスの英文は堅い感じの表現が多く、内容を正確に読み取れているかあまり自信がありません。
プログラマー用の質問サイトなど他で訊いてみてはみてはどうでしょうか。

2015-10-26 02:30 |
yohshiy URL |
編集

URL変更（リンク切れ対策）

google-developers.appspot.comはdevelopers.google.comに変更されているようですね。

つまり、「Charts Gallery」を見るには、
https://google-developers.appspot.com/chart/interactive/docs/gallery
にアクセスするのではなく、
https://developers.google.com/chart/interactive/docs/gallery
にアクセスするのが良いようです。

他の「Additional Charts Gallery」や「Frequently Asked Questions」についても
developers.google.comの各ページで読むことができました。

検索サイトから訪れた方のために、情報共有です。

2020-07-17 13:54 |
kanau URL |
編集

No title

せっかくの記事ですが、リンク先が変わっているようです。

2021-03-21 21:41 |
URL |
編集

02月 | 2023年03月 | 04月
日	月	火	水	木	金	土
-	-	-	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	-

プログラマーズ雑記帳

Google Chart Tools の使い方

Google Chart Tools とは

旧機能からの変更

特徴

グラフの種類

ライセンス

使い方

グラフ作成のスクリプト

グラフ作成の関数

グラフ作成の関数(簡易版)

オプション

Google Chart Tools の使い方

新規トラックバック

管理人のみ閲覧できます

Re: No title

利用規約について

Re: 利用規約について

URL変更（リンク切れ対策）

No title

コメントの投稿