グラフィカルデータ描画ツールFlotの使用
July 3, 2014 – 4:23 pmもう1年くらい前になるが「Web出力用グラフィカルデータ表示ツールにはFlotがお勧め」という記事を書いた。そこでは、このツールの機能確認ということで、簡単なパラメトリック曲線を描画している。
今回は、複数の時系列データを、それぞれ異なる種類の表示法（バーチャート、折れ線グラフ、点表示）で単一のグラフ上に描画する方法を検討してみた。
ぴったりのTutorialを発見： 幸運にも、描きたかったグラフの描画方法を解説した Tutorial が見つかった。Pikemere Web Servicesのブログのエントリのひとつだ。これを参考にしながら、我がサイト上に同じグラフを描いてみることにした。
参考にした Tutorial サイトは次のものだ：
この Tutorial に示されたJavaScriptのソースによって、我がWebサイト上で目的とするグラフを描画するには若干の修正が必要だった。「修正済み」JavaScriptのソースは、このブログの最後にまとめて掲げておく。
それはそれとして、今回、描画したグラフは次のようなものだ：
グラフの描画に必要な前準備： 以前書いた記事「Web出力用グラフィカルデータ表示ツールには Flot がお勧め」に、Flot の導入、インストールの方法について書いた。今回は、これに、複数のグラフを表示する際に必要なグラフ軸の描画のためのプラグインを導入する。このプラグインは、axislabels.js だ。その導入法は以下：
axislabels.js のjavaScriptソースは, http://code.google.com/p/gflot/source/checkout より、以下のように、svn でチェックアウトし、ダウンロードできる：
# Non-members may check out a read-only working copy anonymously over HTTP. svn checkout svn checkout http://gflot.googlecode.com/svn/trunk/ gflot-read-only
ここで使用した axislabels.js は、以下のもの。
/gflot-read-only/flot/jquery.flot.axislabels-20120404.js
本ブログサイトでjQuery本体、Flot本体、そして今回ダウンロードした axilabels.js をhedder ファイルのスクリプト宣言部においておけば目的とするFlotの機能が果たされる。ブログヘッダー関連分は以下：
<!--[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> <script type="text/javascript" src="/jquery/flot/jquery.flot.axislabels.js"></script>
ブログ・ポスト上への描画手続き：
上に掲げたグラフの描画に対応したhtml文は以下；
<div id="placeholder" style="width:500px;height:330px;"></div> <script type="text/javascript" src="/scripts/flot_sample02.js"></script>
描画のためのjavascriptファイル flot_sample02.js は以下：
$(document).ready(function(){ 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" } }; var d1 = [ [new Date('2011/01/01').getTime(), 33], [new Date('2011/02/01').getTime(), 34], [new Date('2011/03/01').getTime(), 23], [new Date('2011/04/01').getTime(), 39], [new Date('2011/05/01').getTime(), 47], [new Date('2011/06/01').getTime(), 26], [new Date('2011/07/01').getTime(), 11], [new Date('2011/08/01').getTime(), 12], [new Date('2011/09/01').getTime(), 24], [new Date('2011/10/01').getTime(), 39], [new Date('2011/11/01').getTime(), 48], [new Date('2011/12/01').getTime(), 48] ]; var d2 = [ [new Date('2011/01/01').getTime(), 11], [new Date('2011/02/01').getTime(), 13], [new Date('2011/03/01').getTime(), 16], [new Date('2011/04/01').getTime(), 18], [new Date('2011/05/01').getTime(), 22], [new Date('2011/06/01').getTime(), 28], [new Date('2011/07/01').getTime(), 33], [new Date('2011/08/01').getTime(), 32], [new Date('2011/09/01').getTime(), 28], [new Date('2011/10/01').getTime(), 21], [new Date('2011/11/01').getTime(), 15], [new Date('2011/12/01').getTime(), 11] ]; var d3 = [ [new Date('2011/01/01').getTime(), 0], [new Date('2011/02/01').getTime(), 2], [new Date('2011/03/01').getTime(), 3], [new Date('2011/04/01').getTime(), 5], [new Date('2011/05/01').getTime(), 9], [new Date('2011/06/01').getTime(), 13], [new Date('2011/07/01').getTime(), 16], [new Date('2011/08/01').getTime(), 16], [new Date('2011/09/01').getTime(), 13], [new Date('2011/10/01').getTime(), 8], [new Date('2011/11/01').getTime(), 4], [new Date('2011/12/01').getTime(), 2] ]; 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", yaxis: 2 }, {label: "Temperature - Low", data: d3, lines:{show:true, fill: false }, points:{show:true, fillColor: '#4572A7'}, color: "#4572A7", yaxis: 2 } ]; $.plot($("#placeholder"), mydata, options); });