前のページへ
Google Ajax API 		次のページへ
Google Visualization API―データを操作する

Google Visualization API（基礎編）

Google Visualization API はデータソースから簡単にWebページに図を表示できる。
以下では、わかり易いように表示される図つまりVisualizationオブジェクトをチャートと呼ぶ事にします。

チャートを表示する

まずは、2009年の即席めんの市場占有率のグラムを表示する簡単なプログラムの例を以下に示す。
占有率の値はネットからパクッてきたものなので実際に合っているかは定かではない。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>2008年・即席めん市場占有率</title>
<!-- （１）Google AJAX API フレームワークの共通APIローダ
    (Google AJAX API Loader)を読み込む -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    // （２）APIローダを使用してVisualization APIをロード
    google.load('visualization', '1', {
        'packages' : [ 'piechart' ]
    });

    function initialize() {
        // （４）チャートを表示するデータを用意
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Height');
        data.addRows(6);
        data.setCell(0, 0, '日清');
        data.setCell(1, 0, '東洋水産');
        data.setCell(2, 0, 'サンヨー');
        data.setCell(3, 0, '明星');
        data.setCell(4, 0, 'エースコック');
        data.setCell(5, 0, 'その他');
        data.setCell(0, 1, 39.3);
        data.setCell(1, 1, 20.4);
        data.setCell(2, 1, 12.8);
        data.setCell(3, 1, 9.6);
        data.setCell(4, 1, 7.4);
        data.setCell(5, 1, 10.5);

        // （５）チャートオブジェクトの作成
        var chart = new google.visualization.PieChart(document
                .getElementById('visualization'));
        // （６）チャート作成条件を設定
        var options = {
            width : 400,
            height : 240,
            is3D : true,
            title : '2008年・即席めん市場占有率'
        };
        // （７）チャートの描画
        chart.draw(data, options);
    }
    // （３）ロードが完了したらinitializeメソッドが実行されるように指定
    google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<!-- （８）チャートを表示するHTML要素を用意 -->
<div id="visualization"></div>
</body>
</html>

たったこれだけのコードでパイチャートが表示される。

図のパイの部分をクリックすると吹き出しで内容が表示されたり、右側の凡例の部分の小さい四角形の部分をクリックするとパイの部分が円から分離したりとあらかじめ基本的なUIも組み込まれている。

プログラムの内容はいたってシンプルなので、何も説明しないでもだいたいの機能はコメントを見れば判るだろう。

あえて、蛇足で補足すれば以下の手順となります。

  1. Google AJAX API フレームワークの共通APIローダ(Google AJAX API Loader)を読み込みます。（決まり文句です。）
  2. APIローダを使用してVisualization APIをロードします。
  3. ロードが完了したらinitializeメソッドが実行されるように指定します。
  4. initializeメソッドにてまずチャートを表示するデータを用意します。
  5. 次に、チャートを表示させるHTML要素を指定してチャートオブジェクトを作成しします。
  6. チャートの表示オプションを指定する場合はオプションの内容を設定します。
  7. データとオップションを指定してチャートオブジェクトのdrowメソッドを呼び出します
  8. チャートを表示するHTML要素（通常はDIV要素）を用意します

ここでは、変数optionsを使用して図の表示エリアの大きさと図のタイトルを指定してdrowメソッドを実行して図を描画しているが、指定しなければデフォルトの値で図を表示してくれる。
ただデフォルトでは図の大きさが小さくなってしまうので代わりに、表示するhemlタグのdiv要素の大きさを指定する事で表示エリアの大きさを指定する事もできる。

        // （７）チャートの描画
        chart.draw(data);
        ...
<!-- （８）チャートを表示するHTML要素を用意 -->
<div id="visualization"  style="width : 400px; height : 240px;" ></div>

google.loadメソッドのpackagesオプションでロードするチャートのパッケージを指定している。
ここのpiechartの部分をareachartやbarchartに変更して作成するオブジェクトをAreaChartやBarChartに変更すれば、それぞれエリアチャートやバーチャートを表示できる。
また、複数の種類のチャートを表示したい場合には，で区切って，複数のチャートのパッケージを指定して，それぞれのチャートオブジェクトを作成してそのオブジェクトに対してdrowメソッドを実行すれば表示できる。

以下に同じデータテーブルを利用して、エリアチャートとバーチャートを同時に表示するコードを示す。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>2008年・即席めん市場占有率２</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1', {
        'packages' : [ 'areachart', 'barchart' ]
    });

    function initialize() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Height');
        data.addRows(6);
        data.setCell(0, 0, '日清');
        data.setCell(1, 0, '東洋水産');
        data.setCell(2, 0, 'サンヨー');
        data.setCell(3, 0, '明星');
        data.setCell(4, 0, 'エースコック');
        data.setCell(5, 0, 'その他');
        data.setCell(0, 1, 39.3);
        data.setCell(1, 1, 20.4);
        data.setCell(2, 1, 12.8);
        data.setCell(3, 1, 9.6);
        data.setCell(4, 1, 7.4);
        data.setCell(5, 1, 10.5);

        // エリアチャートを表示
        var areachart = new google.visualization.AreaChart(document
                .getElementById('areachart'));
        areachart.draw(data);

        // バーチャートを表示
        var barchart = new google.visualization.BarChart(document
                .getElementById('barchart'));
        barchart.draw(data);
    }
    google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="areachart" style="width: 400px; height: 240px; float: left;"></div>
<div id="barchart" style="width: 400px; height: 240px; float: left;"></div>
<div style="text-align: center; clear: both;">エリアャートとバーチャトの表示</div>
</body>
</html>
エリアャートとバーチャトの表示

チャートオブジェクトのイベントを使う

チャートオブジェクトのイベントを以下のように定義できます。
次のコードはパイチャートの右に表示される凡例の四角形が選択された時に選択されている項目をalertにて表示する例です。

google.visualization.events.addListener(chart, 'select', function(e) {
    var selection = chart.getSelection();
    var message = '';
    for ( var i = 0; i < selection.length; i++) {
        var item = selection[i];
        if (item.row != null) {
            message += data.getValue(item.row, 0) + '\n';
        }
    }
    if (message == '') {
        message = '何も選択されていません。';
    }else{
        message += 'が選択されました。';
    }
    alert(message);
});

パイチャートの右に表示される凡例をマウスでクリックして選択してみてください。

この例では使われていませんがイベントとチャートの種類によってはイベント情報をイベント関数に引き渡すものもあります。

以下のコードはパイチャートとテーブルの２つのチャートオブジェクト間のイベントを連携させて片方のチャートの項目が選択されるともう片方の項目も選択されるように指定した例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>2008年・即席めん市場占有率３</title>
<!-- （１）Google AJAX API フレームワークの共通APIローダ
    (Google AJAX API Loader)を読み込む -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    // （２）APIローダを使用してVisualization APIをロード
    google.load('visualization', '1', {
        'packages' : [ 'piechart','table' ]
    });

    function initialize() {
        // （４）チャートを表示するデータを用意
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Height');
        data.addRows(6);
        data.setCell(0, 0, '日清');
        data.setCell(1, 0, '東洋水産');
        data.setCell(2, 0, 'サンヨー');
        data.setCell(3, 0, '明星');
        data.setCell(4, 0, 'エースコック');
        data.setCell(5, 0, 'その他');
        data.setCell(0, 1, 39.3);
        data.setCell(1, 1, 20.4);
        data.setCell(2, 1, 12.8);
        data.setCell(3, 1, 9.6);
        data.setCell(4, 1, 7.4);
        data.setCell(5, 1, 10.5);

        var piechart = new google.visualization.PieChart(document
                .getElementById('piechart'));
        piechart.draw(data);

        var table = new google.visualization.Table(document.getElementById('table'));
        table.draw(data, null);

        google.visualization.events.addListener(piechart, 'select', function() {
            table.setSelection(piechart.getSelection());
        });

        google.visualization.events.addListener(table, 'select', function() {
            piechart.setSelection(table.getSelection());
        });
    }
    google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="piechart" style="width: 300px; height: 200px; float: left;"></div>
<div id="table" style="width: 200px; height: 200px; float: left;"></div>
<div style="text-align: center; clear: both;">イベントの連動</div>
</body>
</html>

テーブルのある項目を選択するとパイチャートの同じ項目が選択されます、 逆にパイチャートの項目を選択するとテーブルの同じ項目も選択されます。

イベントの連動

 

ページのトップへ戻る