flotなどについて今日調べたこと

Ext JSなどの本格的なGUIライブラリの登場により、デスクトップアプリケーションと遜色ないユーザインタフェースの構築が可能。（http://ja.wikipedia.org/wiki/JavaScript）

Direct Web Remoting (DWR) などの技術の発達によりクライアント・サーバ間の通信が著しく容易になったことや、JettyなどのアプリケーションサーバがComet利用時のメモリ使用量の削減を実現したため、サーバからクライアントへの情報のプッシュ型の配信が実用的となった。（http://ja.wikipedia.org/wiki/JavaScript）

Ext Flot は flot を Ext JS の UI で拡張した、Javascript のみで動作するグラフ描画ライブラリ。（http://code.google.com/p/extflot/wiki/ProjectSummaryJa）flot 0.5 とr148(r156?)に関する記述はあるが、現在のflotのバージョンは0.7。

flot は、jQuery用のプロットライブラリ。（http://code.google.com/p/flot/）

https://github.com/flot/flotからflot-flot-v0.7-6-gb2fedcd.zipをダウンロードして、examplesのhtmlをFirefox4に読み込ませて、動作確認。

basic.htmlを改造し、サインカーブで頂点の数を増やしたときに、パフォーマンスが悪化しないかを検証。10万件ぐらいで、体感的に待たされるようになる。jquery.jsとjquery.flot.jsをロードして、$.plot($("#placeholder"), [ d1, d2, d3 ]);とやると、良きに計らって描画してくれる。ここで、placeholderはdiv要素のID、d1, d2, d3 は、プロットする点[x, y]の配列。

graph-types.htmlにあるように、$.plotの第2引数の配列の各要素のオブジェクトで、dataキーにプロットする点[x, y]の配列、lines、bars、pointsキーにプロットするグラフの種類を指定できる。lines: { show: true }がデフォルトだったことがわかる。

setting-options.htmlでは、$.plotの第2引数の配列の各要素のオブジェクトで、labelを指定し、凡例が表示されるようにしている。そして、第3引数のoptionsオブジェクトで、series、xaxis、yaxis、gridを指定している。

annotating.htmlでは、プロットやグリッドの色指定、チャート上の指定した位置への注釈文字列の追加、2Dグラフィックの描画を行っている。

ajax.htmlでは、データを受信するたびに、$.plotメソッドを呼び出している。

realtime.htmlでは、updateInterval（ミリ秒）ごとにチャートを更新している。series: { shadowSize: 0 }をオプションに指定して、影を付けないことで描画を高速化している。また、$.plotメソッドを繰り返し呼び出すのではなく、軸やグリッドは変わらないので、plot.setDataで最新のデータをセットし、plot.draw()で描画している。

turning-series.htmlでは、チェックボックスの選択状態によって、$.plotの第2引数で指定するデータ系列を切り替えて、$.plotメソッドを呼び出している。

selection.htmlでは、jquery.flot.selection.jsをロードして、チャートのX軸範囲の選択を行っている。plotselected、plotunselectedイベントに対するハンドラを指定するとともに、setSelectionメソッドとclearSelectionメソッドで選択範囲の設定をプログラムから設定している。xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }をオプションに動的に追加することで、ズームを行っているのが、plotが置き換わるので、選択状態は自動的に解除される。

zooming.htmlでは、placeholderとoverviewで同じrangeがselectされるようにする。placeholderはselectされたrangeだけが表示される。legend: { show: true, container: $("#overviewLegend") }をオプションにセットすることで、凡例はチャートの外に表示される。

interacting.htmlでは、grid: { hoverable: true, clickable: true }をオプションに指定することで、plothoverとplotclickのイベントが発生するようにしている。plothoverではマウスをかざした点の座標をツールチップなどに表示している。plotclickでは、クリックされた点をplot.highlightメソッドでハイライトしている。

navigate.htmlでは、jquery.flot.navigate.jsを利用して、ズームとパンを行っている。

resize.htmlでは、jquery.flot.resize.jsを利用して、チャートのリサイズを自動的に行っている。

symbols.htmlでは、jquery.flot.symbol.jsを利用して、○以外の形で、点を描画している。

time.htmlでは、x軸の値がJavaScriptのタイムスタンプなので、xaxisのmodeをtimeに設定している。

visitors.htmlでは、grid: { markings: weekendAreas }を指定し、週末だけが別の色の背景で表示されるようにしている。

multiple-axes.htmlでは、オプションにyaxesを指定して、データにyaxis: 2を指定して、2つの軸でチャートを描画している。

interacting-axes.htmlでは、2つのX軸と、4つのY軸を表示し、軸をクリックすると、どの軸がクリックされたかをメッセージ欄に表示するようにしている。

thresholding.htmlでは、jquery.flot.threshold.jsを利用して、閾値を外れたデータは、別の色で描画するようにしている。

stacking.htmlでは、jquery.flot.stack.jsを利用して、チャートのスタック表示を行うようにしている。

percentiles.htmlでは、jquery.flot.fillbetween.jsを利用して、上下の系列をグラデーションで描画している。

tracking.htmlでは、jquery.flot.crosshair.jsを利用して、十字カーソルを表示させ、マウスの現在位置にあるチャートのアイテムのｙ座標を凡例に表示させている。

image.htmlは、jquery.flot.image.jsを利用して、チャート内にイメージを表示している。イメージがロードされるのを待って、チャートの描画処理が開始されるようにしている。

pie.htmlは、jquery.flot.pie.jsを利用して、円グラフを表示している。

JavaScriptのチャートコンポーネントには、Emprise JavaScript Charts（http://www.ejschart.com/）というものもあるが、こちらはオープンソースではない。

PlotKit（http://www.liquidx.net/plotkit/）は、JavaScript用のチャートライブラリで、HTML CanvasとSVGに対応している。

flotr(http://solutoire.com/flotr/)というライブラリもある。