Flotr2で描く動的なグラフHow to draw dynamic graphs with ‘Flotr2′

フランスは一気に暗く寒くなりました。。。松浦です。
朝の7時では真っ暗ですし、コートを羽織る人も随分増えてきました。この先が思いやられますが、オイスターやムール貝が美味しく食べられると期待して頑張っています。

今日はFlotr2を使った動的なグラフの描き方を紹介ます。Flotr2を使うとjavascriptで綺麗でかつ簡潔にグラフが描けます。
http://www.humblesoftware.com/flotr2/

ここではsinカーブ上を点が移動していくグラフの描き方を紹介します。

flotr2

グラフの特徴

・sinカーブ上を点が移動していく
・点の位置を強調するために縦線が存在する
・点の座標が右側に表示される
・グラフをクリックすると停止(/再生)する

デモ

http://dev.inet-lab.me/inet-doc/public/blog/demo/flotr2/drawSin.html

グラフの描き方

上記デモに含まれるdrawSin.jsを見て貰うと大体の事が分かると思います。
http://dev.inet-lab.me/inet-doc/public/blog/demo/flotr2/drawSin.js

Flotr2はデモが豊富なので使い方はそれらデモから学ぶのが良いと思います。今回のデモでは強調用の縦線(lines)のスタイルを変えていま す。この変更方法はflotr.jsのコードの3462行目:Flotr.addType(‘lines’辺りに書かれています。points等々の修飾 もコードを直接読んだ方が良く分かると思います。

クリック時にクリックしたx軸の位置に点や縦線を持ってくるように変更すると、データを追うときに便利です。またモバイル端末で実験をしているので あれば、その時の位置情報や動画と同期させてこういったデータを眺めると大雑把な解析がやりやすいです。デモだけで無く、色々なシーンでこの手のグラフは 使い勝手が良いと思います。適当に改変して遊んで下さい。

おわりに

個人的にFlotr2が好きな理由は、グラフが綺麗な事に加えて、APIの設計も綺麗な事です。多数のデモがあり、始めるのも簡単です。 CodeMirrorを使っていて、その場でコードを編集し試せるのも魅力です。ドキュメントは少ないのですが、’コード読め’という作者の暗黙の意図で しょう。実際にコードはとても読みやすいです。

最後に他のツールも紹介しているページを示します。

・13 Chart and Graph plotting javascript plugins
http://www.queness.com/post/10781/13-chart-and-graph-plotting-javascript-plugins

個人的に上記のまとめページはすごく良いと思います。あと、Envision.jsもとても良い感じなので、上記のリストに足しておきたいです。

– Envision.js
http://www.humblesoftware.com/envision/

by MATSUURA Satoshi