ローソクチャートや棒、折れ線グラフを作るHTML5グラフライブラリ「Rocketchart」
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でできないかどうか検討する価値がありそうです。