MOONGIFT

オープンソース・フリーウェアを毎日紹介するブログ。日々の業務の効率化、新しいサービスのネタ探しにどうぞ。SNS、SBS、CMS、オフィス、画像編集、ユーティリティ、Firefoxアドオン、テキストエディタ、ゲーム…ジャンルは様々。

SVGを使ったものすごいグラフライブラリ「dygraphs JavaScript Visualization Library」

タグ: [] [] [] [] [] [] [] []

buzz_button

dygraphs JavaScript Visualization LibraryはJavaScript製のオープンソース・ソフトウェア。グラフライブラリは多数あれど、大抵は円グラフや棒グラフなどのシンプルなグラフを描く機能しかない。高度なグラフを描こうとすると利用できるライブラリは途端に少なくなる。

ピクチャ 278.png
高機能なグラフライブラリ

 

また高度なグラフはクライアントサイドだけでなく、サーバサイドの仕組みが必要になることも多い。そんな中dygraphs JavaScript Visualization Libraryはとても簡単に使えるグラフライブラリになっている。JavaScriptでSVGを描いてグラフ化するのだ。

主なグラフはX-Y軸を持った折れ線グラフになるようだ。とはいえ測定範囲を含んだグラフを描いたり、グラフの一部をマウスを使って拡大する、マウスオーバーすると値が表示されるなど高度な機能が盛り込まれている。SVGを利用しているが別ライブラリを使うことでIEでも利用できる点がいい。

ピクチャ 282.png
ポインタを変更した例

 

さらにお勧めなのが元データとしてCSVファイルが使える点だ。XML系のデータファイルを利用するものが多い中、汎用性の高いCSVファイルは便利だ。さらにGoogle Visualization APIと互換性があり、クエリーを使って引き出したデータをそのまま描画することもできる。高度な折れ線グラフを必要とする際にはきっと役立つはずだ。

3dsearch53.png
IEでも表示可能

 

執筆時のバージョン

 

dygraphs JavaScript Visualization Library
 http://www.danvk.org/dygraphs/

December 20th, 2009 Posted by admin | 1コメント

1 Comment »

  1. http://www.danvk.org/dygraphs/#ie
    を見るとSVGではなくてHTMLのcanvas (IEではexcanvas)を使っているそうですよ。

    Comment by hnakamur | 2009/12/21 Monday

Leave a comment

MOONGIFTネットワーク。こちらもぜひご覧ください。
MOONGIFT
Open Service
Rails 2.0
Resident on Net
iPhone最適化
リーンソフトウェア
MarketPedia
Producing Web
Cool Coding