読者です 読者をやめる 読者になる 読者になる

グラフ表示を行うGoogleのAPI、Google Chart Toolsについて。

Javascript Google Visualization API Google Chart Tools

Google Chart Toolsは大きく分けて2種類のAPIで構成される。

  • image charts(Chart API)
  • interactive charts(Visualization API)
  • image charts

主に画像でグラフを描画するAPI
QRコードや数式も描画できる割と広い範囲を扱うAPI

  • interactive charts

今回の本題。
その名の通りinteractiveなグラフを描画するAPI
グラフ自体はSVG等で描画されている模様(未調査)。
マウスでグラフに対してのアクションを行えるものが多い。


interactive chartsの中からいわゆる折れ線グラフを表示するline chartの描画方法について。
HTML側でgoogle apiライブラリの読み込みを行う。

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

描画スクリプト

実行結果は以下。

まずAPIのパッケージをロードする。
linechartとなっているところがロードするグラフの種類となる。

google.load("visualization", "1", {packages:["linechart"]});
google.setOnLoadCallback(drawChart);

またloadのcallbackも設定できる(省略可)。


ポイントはデータの作り方。
今回はDataTableオブジェクトにデータを追加する形で作成。
他にもDocsの表データやcsvから読み込む方法などがある。

まずはデータカラムを作成する。

    data.addColumn('string', 'days');
    data.addColumn('number', 'キャベツ');
    data.addColumn('number', 'にんじん');

addColumnの第1引数はデータ型。
string,number,boolean,date,datetime,timeofdayがある。
第2引数はラベル。


その後データを追加していく。

    data.addRows(6);

    data.setValue(0, 0, "2010/4/20");
    data.setValue(0, 1, 350);
    data.setValue(0, 2, 80);
    data.setValue(1, 0, "2010/4/21");
    data.setValue(1, 1, 320);
    data.setValue(1, 2, 78);
    data.setValue(2, 0, "2010/4/22");
    data.setValue(2, 1, 310);
    data.setValue(2, 2, 76);
    data.setValue(3, 0, "2010/4/23");
    data.setValue(3, 1, 280);
    data.setValue(3, 2, 78);
    data.setValue(4, 0, "2010/4/24");
    data.setValue(4, 1, 290);
    data.setValue(4, 2, 78);
    data.setValue(5, 0, "2010/4/25");
    data.setValue(5, 1, 288);
    data.setValue(5, 2, 79);

addRowsでデータの行数を定義する必要がある。
setValueの引数、
setValue(データのシーケンシャルな番号, ラベルインデックス, セットするデータ)
ラベルインデックスの数値はaddColumnでセットした順と同じ。

    //グラフを埋め込む要素を指定
    var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));

    options = {
	width: 600,
	height: 350,
	legend: 'bottom',
	title: '野菜のお値段'
    };

    //グラフの描画
    chart.draw(data, options);

optionsでグラフの幅やタイトルを指定できる。
他にもmax,minで最大値、最小値を定義できたりする。


実際にはデータをJSON等で取得する場合が考えられるので、
データの作成部分をもう少しシンプルにしたのが下記。