Flot のマウスイベントをPost上で試してみた
July 27, 2014 – 8:28 am前回、前々回とグラフィカル描画ツールFlotの使用経験について書いた。
今回は、以前このブログ上で（WP Post上で）Google Visualization APIを使って描画した折れ線グラフをFlotを用いて描画し、二つの描画ツールの動作を比較してみた。
以下、作業記録をメモしておいた。
描画結果： なにはさておき、今回描画した折れ線グラフを下に示す。
この折れ線グラフ上にマウスカーソルを動かすと、グラフの下方にカーソル指示部のデータが表示される。試してみたい。因みに、マウスカーソルの位置データのうち、x軸部についてはタイムスタンプで表示されている。”x adjusted”の部分は図のx軸にもちいている西暦年の表示が対応している。
Mouse hovers at
(0, 0) x adjusted: 0========== Item Data ==========
item.dataIndex = 0
item.series.label = –
item.datapoint[0] = 0, item.datapoint[1] = 0
item.pageX = 0, item.pageY = 0
Google版とFlat図形の比較： Flatの標準的な使用法の範囲で可能な限り以前作成したGoogle Visualization APIのサンプル（以下、「Google版サンプル」と呼ぶ）に近いものになるよう努力した。残念ながら、私の能力では、Google版サンプルと若干の違いが残ってしまったが、その違いをまとめると：
- グリッド線の一番下がGoogle版では濃いラインとなっているが、今回作成したものは他のグリッド線と同じものになってしまっている。
- 図のタイトル（Company Performance）はGoogle版では図の一部となっているが今回作成のFlot版では図の一部としては扱われない。
- Y軸の表記がGoogle版では３ケタ目にカンマ表示となっているが、Flot版ではベタ書きになっている。
- 凡例の表示方法、表示位置に違いがある。
- Google版では図中で（入力）データポイント部にマウスカーソルが重なるとデータの内容が吹き出し形式で表示されるが、Flot版ではマウスカーソルの重なりを示す標識が現れるだけで、データの内容は表示されない。
といったところだ。１．のグリッド線についてはGoogle版と同様な形式での描画は難しそうだが、2,3,4についてはFlotの図形部の外部に何等かのかたちで付け加えることで同じような表現を実現することができると思う。
描画に用いたHTMLならびにJavaScriptソース:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Checking Flot</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./flot/jquery.flot.js"></script>
</head>
<body>
<div id="placeholder" style="width:350px;height:180px;"></div>
<p id="hoverdata">Mouse hovers at
(<span id="x">0</span>, <span id="y">0</span>) x adjusted: <span id="x_adjusted">0</span></p>
<p></p>
<p> ========== Item Data ==========</p>
<p> item.dataIndex = <span id="dataIndex"> 0 </span>
<p> item.series.label = <span id="label"> - </span></p>
<p> item.datapoint[0] = <span id="datp0">0</span>, item.datapoint[1] = <span id="datp1">0</span></p>
<p> item.pageX = <span id="pageX">0</span>, item.pageY = <span id="pageY">0</span>
<script type="text/javascript">
$.ajax({
type: "GET",
cash: false,
url: "/ajax_flot/google_vis.data",
dataType: 'text',
success: function( data, dataType ) {
if ( dataType = "text" ) data = eval(data);
var mydata = set_mydata( data );
$.plot($("#placeholder"), mydata, options);
}
});
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item ) {
var timestamp = pos.x;
var date = new Date(timestamp);
$("#x").text(pos.x.toFixed(2));
$("#x_adjusted").text(date.getFullYear() );
$("#y").text(pos.y.toFixed(2));
if ( item ) {
// alert( item.dataIndex );
if ( previousPoint != item.dataIndex ) {
previousPoint=item.dataIndex;
$("#dataIndex").text( item.dataIndex );
$("#label").text( item.series.label );
$("#datp0").text( item.datapoint[0] );
$("#datp1").text( item.datapoint[1] );
$("#pageX").text( item.pageX );
$("#pageY").text( item.pageY );
}
else {
// alert("previousPoint reset!\n");
previousPoint = null;
}
}
});
function set_mydata( data ) {
var imax = data.length;
var d1 = new Array(imax);
var d2 = new Array(imax);
for ( var i=0; i<imax; i++ ) {
d1[i] = new Array(2);
d1[i][0] = data[i][0];
d1[i][1] = data[i][1];
d2[i] = new Array(2);
d2[i][0] = data[i][0];
d2[i][1] = data[i][2];
}
var mydata = [
{label: "Sales",
data: d1,
lines:{show:true, fill: false },
points:{show:false, fillColor: '#3366CC'},
color: "#3366CC"
},
{label: "Expenses", data: d2,
lines:{show:true, fill: false },
points:{show:false, fillColor: '#DC3912'},
color: "#DC3912"
}
];
return mydata;
}
var options = {
xaxis :
{
min: new Date(2003, 6, 30 ).getTime(),
max: new Date(2008, 11,30 ).getTime(),
mode : "time",
show : true,
timeformat: "%y",
tickSize: [1, "year"],
tickLength: 0, // hide gridlines
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 5
},
yaxis:
{
max: 1200,
min: 400,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: true,
borderWidth: 0
},
legend: {
labelBoxBorderColor: "none",
position: "se"
}
};
</script>
</body>
</html>
Ajaxを通じて読み込んだデータ：
[
[new Date('2004/01/01').getTime(), 760, 400 ],
[new Date('2005/01/01').getTime(), 1170, 460 ],
[new Date('2006/01/01').getTime(), 660, 1120 ],
[new Date('2007/01/01').getTime(), 1030, 540 ],
[new Date('2008/01/01').getTime(), 1090, 720 ]
]