Flot + Ajax(jQuery) メモ
July 7, 2014 – 10:44 am前回、時系列データをFlotを用いて複数の時系列データを一つのグラフ上に描画する方法についてメモしておいた。
今回は、これを少し進めるかたちで、生の時系列データをAjaxを用いて取り込み、これをFlotで描画する方法につい検討した。
データ概要： 描画したグラフは前回と全く同様ではあるが、前回と異なる時系列データの取り込みから描画に至るjavaScritpソースそしてAjaxを通じて取り込んで時系列データをメモとして残しておいた。
なお、以下に示すHTMLならびにJavaScriptソースで描画されるグラフは前回示したものと全く同じである。
描画に用いた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>
<script type="text/javascript" src="./flot/jquery.flot.axislabels.js"></script>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script type="text/javascript">
$.ajax({
type: "GET",
cash: false,
url: "/ajax_flot/multi_plot.data",
dataType: 'text',
success: function( data, dataType ) {
if ( dataType = "text" ) data = eval(data);
var mydata = set_mydata( data );
$.plot($("#placeholder"), mydata, options);
}
});
function set_mydata( data ) {
var imax = data.length;
var d1 = new Array(imax);
var d2 = new Array(imax);
var d3 = 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];
d3[i] = new Array(2);
d3[i][0] = data[i][0];
d3[i][1] = data[i][3];
}
var mydata = [
{label: "Rainfall",
data: d1,
bars:{
show: true,
align: "center",
barWidth: 12*24*60*60*1000,
fill: true,
lineWidth: 1
},
color: "#478514"
},
{label: "Temperature - High",
data: d2,
lines:{show:true, fill: false },
points:{show:true, fillColor: '#AA4643'},
color: "#AA4643",
},
{label: "Temperature - Low", data: d3,
lines:{show:true, fill: false },
points:{show:true, fillColor: '#4572A7'},
color: "#4572A7",
yaxis: 2
}
];
return mydata;
}
var options = {
xaxis :
{
min: new Date(2010, 11, 15).getTime(),
max: new Date(2011, 11, 18).getTime(),
mode : "time",
timeformat: "%b",
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
// tickSize: [1, "month"],
tickSize: [3, "month"],
tickLength: 0, // hide gridlines
axisLabel: "Months",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 5
},
yaxes: [
{
tickFormatter: function (val, axis) {
return val + "mm";
},
max: 65,
axisLabel: "Rainfall",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 5
},
{
position: "right",
tickFormatter: function (val, axis) {
return val + "\u00B0C";
},
max: 40,
axisLabel: "Temperature",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 5
}
],
grid: {
hoverable: true,
borderWidth: 1
},
legend: {
labelBoxBorderColor: "none",
position: "nw"
}
};
</script>
</body>
</html>
Ajax でとりこまれる時系列データ - multi_plot.data –
[
[new Date('2011/01/01').getTime(), 33, 11, 0 ],
[new Date('2011/02/01').getTime(), 34, 13, 2 ],
[new Date('2011/03/01').getTime(), 23, 16, 3 ],
[new Date('2011/04/01').getTime(), 39, 18, 5 ],
[new Date('2011/05/01').getTime(), 47, 22, 9 ],
[new Date('2011/06/01').getTime(), 26, 28, 13 ],
[new Date('2011/07/01').getTime(), 11, 33, 16 ],
[new Date('2011/08/01').getTime(), 12, 32, 16 ],
[new Date('2011/09/01').getTime(), 24, 28, 13 ],
[new Date('2011/10/01').getTime(), 39, 21, 8 ],
[new Date('2011/11/01').getTime(), 48, 15, 4 ],
[new Date('2011/12/01').getTime(), 48, 11, 2 ]
]