Web出力用グラフィカルデータ表示ツールには Flot がお勧め
August 18, 2012 – 4:39 pmネットワーク上に存在するデータをグラフィカルに表現するツールとして、さまざまな方法が提案されている。最近、こうしたツールのひとつで、jQueryのプラグインとして開発されたFlot なるツールがあることを知り、早速、試してみた。
感想をひとこと： 実に良い。
機能を確認しようと、このFlotを用いて簡単な図形をブログのポスト上に描画してみた。
この経験を中心に、Flotの印象をメモしておいた。
Google Visualization APIと比べてみると： 以前、こうした可視化ツールのひとつである Google Visualization APIを試したことがある。今回のFlot, Google Visualization APIに優るとも劣らないものとの印象を受けた。
Google Visualization APIでは、（私の実力では？）実現できなかった異なる種類のグラフ表示（例えば、バーチャート、折れ線グラフ、点表示）を重ねて表示できるなどの利点もある。
まだ、使い始めたところなのだが、このツール、かなりの優れものではないか、と思ってしまった。
動作例： Flot の動作例のひとつとして、簡単なパラメトリック曲線をこのブログのポスト上に出力してみた。
以下に描画しているパラメトリック曲線は、
x = sin(at),
y = cos(bt),
t: [ 0, 2Π ]
に係わり、パラメータ（ａ＝１、ｂ＝２）、（ａ＝１、ｂ＝２）、（ａ＝１、ｂ＝２）の3種の組みのものだ。
a=1,b=2
a=3,b=2
a=3,b=4
図形の上部に配置しているチェックボックスにより、描画した曲線を選択することができる。
Flot のダウンロードとインストール： Flot の動作に必要なjavascript は、 http://code.google.com/p/flot からダウンロードできる。
jQueryが動作する環境下では、Flot のサイトからダウンロードしたjavascript ファイルのうち、jquery.flot.js をhedder ファイルのスクリプト宣言部におけばよい。このブログのヘッダー関連部は以下：
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript" src="/jquery/dateformat.js"></script> <script type="text/javascript" src="/jquery/flot/jquery.flot.js"></script>
ブログ・ポスト上への描画手続き： 動作例の描画部の html 文は以下：
<input class="1" type="checkbox" value="a=1,b=2" checked >a=1,b=2 </input> <input class="2" type="checkbox" value="a=1,b=2" checked >a=3,b=2 </input> <input class="3" type="checkbox" value="a=1,b=2" checked >a=3,b=4 </input> <div id="placeholder" style="width:400px;height:400px;"></div> <script type="text/javascript" src="/scripts/flot_sample.js"></script>
描画用のjavascript ファイル flot_sample.js は以下：
function draw_lines( checked01, checked02, checked03 ) {
var d1 = [];
var d2 = [];
var d3 = [];
for (var p = 0; p < 1.01; p += 0.005 ) {
var t = 2. * p * Math.PI;
var x1 = Math.cos( 1.0 * t );
var x2 = Math.cos( 3.0 * t );
var x3 = x2;
var y1 = Math.sin( 2.0 * t );
var y2 = y1;
var y3 = Math.sin( 4.0 * t );
d1.push([x1, y1]);
d2.push([x2, y2]);
d3.push([x3, y3]);
}
var options = {
xaxis: { min: -1.5, max: 1.5 },
yaxis: { min: -1.5, max: 1.5 }
}
$.plot($("#placeholder"),
[
{label: "a=1, b=2", data: d1, lines: { show: checked01 } },
{label: "a=3, b=2", data: d2, lines: { show: checked02 } },
{label: "a=3, b=4", data: d3, lines: { show: checked03 } }
],
options
)
}
$(function () {
var check_in_01 = true;
var check_in_02 = true;
var check_in_03 = true;
draw_lines( check_in_01, check_in_02, check_in_03 );
});
$("input").click(function(event) {
var checked01 = $("input.1").is(':checked');
var checked02 = $("input.2").is(':checked');
var checked03 = $("input.3").is(':checked');
draw_lines( checked01, checked02, checked03 );
});
ブラウザへの依存性： Flot の描画性能それ自身は素晴らしいと思うのであるが、このブログのポスト上に描画した際に、ブラウザによって若干の依存性、問題が見出されている。
ＩＥ９上でこのブログポストを読んでいる読者は、ｙ軸のスケール部のマイナス標記が適正に書かれていないことに気づかれていると思う。Google Chrome、Mozilla Firefox、Safari（いずれも、Windows-7(64bit版上で動作させている）では、こうした現象はみられない。
1 Trackback(s)