※ 画像は公式サイトデモより

最近は簡単に使えるグラフライブラリが増えてきた。Flashのものは見た目が奇麗で、画像出力のものも見やすさではひけを取らない。だがこうしたグラフは一度表示したが最後、リロードしないと変化しないものが多かった。

ピクチャ 230.png

パイチャート

 

そうではない、もっとダイナミックに変化するグラフを描きたい場合はこれを使ってみよう。

今回紹介するオープンソース・ソフトウェアはProtoChart、JavaScriptだけで描くグラフライブラリだ。

ProtoChartはCanvasを使って、JavaScriptのみでグラフを生成している。Canvasは本来、IE6には対応していないが、外部ライブラリを読み込むことで描画できるようにしている。これにより対応ブラウザはIE6/7、Firefox2/3、Safariとなっている。またSafariに対応しているとあって、iPhone/iPod Touchでも表示できる。

ピクチャ 231.png

棒グラフ。表示項目を動的に変更できる。

 

利用しているライブラリはPrototype.jsになっている。また、描画できるグラフはパイチャート、棒グラフ、線グラフ、点グラフ、エリアグラフ、そしてそれらの組み合わせたグラフだ。

JavaScriptベースとあって、ダイナミックにグラフを変更したり、項目の表示/非表示を切り替えたりできる。ProtoChartを使えば単なる結果としてだけのグラフではなく、もっとインタラクティブに楽しめるグラフの使い方が提案できそうだ。

ピクチャ 232.png

組み合わせグラフ

 

ProtoChart

 http://www.deensoft.com/lab/protochart/index.php

protochart - Google Code

 http://code.google.com/p/protochart/