Interactive Charts (Google Visualization API)

目次

APIの使用手順

  1. チャートを格納するためのdiv要素の作成
  2. ライブラリの読み込み
  3. データの準備
  4. チャート オブジェクトのインスタンスの作成
  5. イベントハンドラの登録 (必要ならば)
  6. チャートの描画

ライブラリの読み込み

AJAX APIの読み込み

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

Visualization APIとVisualizationライブラリの読み込み

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

複数のライブラリを読み込みには、

<script type="text/javascript">
  google.load( 'visualization', '1', { packages: [ 'corechart', 'table', 'geomap' ] } );
</script>

のようにカンマで区切って並べます。

データの準備

チャートで使用するデータは、2次元のデータテーブルとして用意する必要があります。そのために2種類のオブジェクトが用意されています。

  • DataTable (google.visualization.DataTable)
  • DataView (google.visualization.DataView)

DataViewはDataTableから作成し、DataTableの表示内容をカスタマイズして出力するためのものです。

手動でのデータ作成

var data = new google.visualization.DataTable();

// 列のデータ形式とラベルの宣言
data.addColumn( 'string', 'Task' );
data.addColumn( 'number', 'Hours per Day' );

// 行のデータの追加
data.addRows( [
  [ 'Work', 11 ],
  [ 'Eat', 2 ],
  [ 'Commute', 2 ]
  ] );

チャート オブジェクトのインスタンスの作成

使用するチャートに合わせたオブジェクトのコンストラクタを、そのチャートの描画を行うDOMエレメントを与えて呼び出します。

var container = document.getElementById( 'visualization' );

var chart = new google.visualization.PieChart( container );

イベントハンドラの登録

イベントハンドラを登録することで、ユーザーからの操作などに応じて独自の処理をできるようになります。

google.visualization.events.addListener(
    source_visualization, // ハンドラを登録するVisualizationのインスタンス
    event_name,           // イベント名
    handling_function     // イベントを受け取る関数
    )

実際には次のように使用します。

var table = new google.visualization.Table( container );

google.visualization.events.addListener( table, 'select', SelectHandler );

function SelectHandler()
{
}

参考

イベントの発生

コード上からイベントを発生させることもできます。

google.visualization.events.trigger(
    source_visualization,  // ハンドラを登録するVisualizationのインスタンス
    event_name,            // イベント名
    event_args             // イベントハンドラに渡す変数
    )

参考

チャートの描画

draw()メソッドの呼び出しでチャートの描画が行われます。またチャートによっては、2番目の引数でサイズや色を指定できる場合があります。

chart.draw( data, null );

実行イメージ

参考