ITエンジニア/デザイナ向けにオープンソースを毎日紹介

RocketchartはHTML5で作られたダイナミックなグラフライブラリです。

HTML5でできることがどんどん広がっています。今回紹介するRocketchartsもHTML5を駆使しています。そしてすごいグラフを作ってきました。


ローソクチャートです。HTML5で作られています。


折れ線グラフを追加しました。


さらに棒グラフと折れ線グラフのミックスです。


クリックするとその箇所の数値が分かります。


表示範囲をマウスで選択して絞り込むこともできます。


逆に広げた場合です。

RocketchartはJSONデータを使ってCanvasタグにグラフを描いています。そのため直接書き出すのはもちろん、AjaxなどでJSONデータを渡してレンダリングすることもできそうです。

RocketchartはJavaScript製、GPL v3のオープンソース・ソフトウェアになります。


MOONGIFTはこう見る

HTML5だけでここまでのグラフが作れてしまうとGoogleファイナンシャルで使われているグラフなどはHTML5に切り替えることもできるかも知れません。Flashで作るのに比べるとJavaScriptとの親和性も高く、プラグイン利用による余計な問題も生まないのが利点です。

Adobeがスマートフォン向けのFlashをあきらめたこともあって、スマートフォンのHTML5推進が勢いづいています。その流れはきっとスマートフォンからデスクトップへ波及するでしょう。今、Flashでやられていることがあれば、HTML5でできないかどうか検討する価値がありそうです。

デモ:Awesome open-source HTML5 financial charts!

chasebgale/rocketcharts - GitHub

 

MOONGIFTの関連記事

  • DevRel
  • Com2