10
Jun

グラフを表示するjQuery、FLASHとGoogle Chart API

[ API : google : tools : webデザイン ]

当然なのですが、データをグラフや図案化して視覚化したほうが人に伝わります。伝えたい人が見せたいようにも表現を変えたりすることもできたりするので、データをグラフ化するということは、非常に効果がある見せ方の一つになります。

というわけで、あるデータをグラフで表示する方法をFLASH、PHP、Javascriptなどで模索していたのですが、Google Chart APIの機能がシンプルだったので、ちょっと使ってみました。Google chart APIというだけあって、毎回フォーマットに従ってGoogleにリクエストを投げる必要があるのですが、キチンと返ってきます。あたりまえですけど。レンダリングによって毎回画像を生成されるフォーマットはPNG。1 日に API を 25 万回以上呼び出すサービスの場合でなければ、自由に利用してもオッケイみたいです。ちなみにこのAPIって、google analyticsとかでも使われているものと同じっぽいです。

Google Chart API

グラフの種類は結構豊富

折れ線グラフ
スパークライン
棒グラフ
円グラフ
ベン図
散布図
レーダーチャート
地図
Google-o-meter

グラフといっても表現する方法、目的によって見せ方もいろいろありますが、これだけあれば結構まかなえそう。指定するパラメーターによっては、色、サイズ、凡例、マーカーなども設定することが可能になります。Google-o-meterっていうのは、車のスピードメーターみたいな図の表現。使い道ってあるのかな？

URLの記述フォーマット

フォーマットは、URLで指定する方法でパラメーターを、&で続けて指定していきます。HTML の imgタグの中に記述する際は、アンパサンド (&) の代わりに、文字実体参照 & を使用する必要があります。

Google Chart API URL は、次のフォーマットに従う必要があります。
http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

http://chart.apis.google.com/chart? は Chart API がある場所です。

& はパラメータの区切り文字です。

chs=250x100 はチャートのサイズです (ピクセル単位)。

chd=t:60,40 はチャートのデータです。

cht=p3 はチャートのタイプです。

chl=Hello|World はチャートのラベルです。

HTML ドキュメントに Chart API 画像を表示するには、<img> タグに URL を埋め込みます。たとえば次の <img> タグを使用すると、上と同じ画像が生成されます。

<img src="http://chart.apis.google.com/chart? chs=250x100 &chd=t:60,40 &cht=p3 &chl=Hello|World" alt="Sample chart" />

棒グラフ

cht=bhsとかcht=bvsとか指定します。水平（bhs）、垂直（bvs）、グループ化などが指定できます。

チャートタイプ　棒グラフの指定の方法 [Google Charts API]
実際に表示させてみる。その際のHTMLのコードは、

<img src="http://chart.apis.google.com/chart?chs=320x150&chd=t:10,10,10,20,40|10,20,30,50,90&cht=bvs&chl=Mar|%ef%bc%94%e6%9c%88|May|Jun|Jul&chco=4d89f9,c6d9fd&chbh=20,30">

１行で指定する。

URLの場合は、 http://chart.apis.google.com/chart?chs=320x150&chd=t:10,10,10,20,40|10,20,30,50,90&cht=bvs&chl=Mar|4%e6%9c%88|May|Jun|Jul&chco=4d89f9,c6d9fd&chbh=20,30

円グラフ

cht=p3とかcht=pって指定します。

チャートタイプ　円グラフの指定の方法 [Google Charts API]

【HTMLのコード】

<img src="http://chart.apis.google.com/chart?chs=320x150&chd=t:10,10,10,20,40|10,20,30,50,90&cht=p3&chl=chrome|firefox|IE7|safari|netscape&chco=4d89f9,c6d9fd&chbh=20,30">

パイっていう表現がいいですね

折れ線グラフ

cht=lcとかcht=lxyって指定します。

チャートタイプ　折れ線グラフの指定の方法 [Google Charts API]

【HTMLのコード】

<img src="http://chart.apis.google.com/chart?chs=320x150&chd=t:10,10,10,20,40|10,20,30,50,90&cht=lc&chl=Mar|Apr|May|Jun|Jul&chco=4d89f9,c6d9fd&chbh=20,30">

そのほか、グリッド線を入れたり、線を種類を設定だったり、背景のグラデーションだったりを指定することも可能みたいなので、表現したいグラフをイメージしてから作成したほうが良さそうですね。ちなみに凡例に日本語を入れてみたりしましたが、日本語は表示できないようです。日本語を表示させるためには、utf-8に変換してから指定するれば、表示されるようです。

Google Chart API で漢字を含む日本語が通る
URL エンコード、デコードもできる UTF8/16 変換ライブラリ

そのほか、jquery、FLASHなどのプラグンを探してみる

このgoogle chart API以外にもグラフを生成することができるjQueryやFLASH、PHPのライブラリやYUIなんかもありましたので、追加。時間があるときにでも特徴を押さえておこう。

Yahoo! UI Library: Charts
基本的に、FLASHが表示を担当するYUIの方がデザインの表現の幅がいろいろとあるみたいです。たとえば棒グラフを3Dにしたりとか、棒グラフが表示されるときにアニメーションしたりとか
Flot
jQueryのライブラリ。オプションなどの設定でインタラクティブにグラフ表示に変化させられる。サンプル
AmCharts
株価のチャートのようなものも作成することができる。FLASHで描画しているので、インタラクティブにアニメーションするようなグラフが表示が可能。有料です。85 euroから
PHP/SWF Charts 5.0
無料で提供されているのは、インタラクティブ性が低い製品のよう。クリックして値がでるようなものは有料。49ドルから。
Open Flash Chart 2
jQchart
TufteGraph

Introduction to TufteGraph from Xavier Shay on Vimeo.