ひよっこ。

I want to…

Posts Tagged ‘flot’

flotで日付のaxis表示がずれて焦るなど

Posted by hikaruworld : 2011 2月 25

jQueryのプラグインflotは便利です。
IEでなければ…ですが。

flotにおいて横軸はoptions.xaxisで整形出来ますが、
これに日付を設定していた場合にちょっとはまったのでメモしておきます。

たとえば、こんな風にミリ秒を与えて、xaxisのmodeを利用して整形しようとします。

var ticksData: [1298300400000, 1298905200000 /*...以下省略 */]

xaxis: {
	mode: "time",
	timeformat: "%m/%d",
	ticks: ticksData,
}

期待する値はは2/22,3/1ですが、
出力される結果は2/21,2/28になってしまいます。

これは日付を整形するflotの実装関数$.plot.formatDateが

getUTCDate()

になっているためでした。

まぁ、ローカル時間で渡していて世界標準時間で取ったらずれたという、よくあるパターン…
というわけで、tickFormatterを自分で定義しておきました。

xaxis: {
	ticks: ticksData,
	// 変換ロジックを定義
	tickFormatter: function (v, axis) {
		var d = new Date(v);
		var r = [];
		r.push(d.getMonth() + 1);
		r.push("/");
		r.push(d.getDate());

		return r.join("");
	}
}	

Posted in program | タグ: , , , | Leave a Comment »

jQueryのグラフライブラリflotをちょっとだけチューニングする

Posted by hikaruworld : 2011 2月 15

jQueryのライブラリの一つでグラフ描画用のライブラリでflotというものがあります。
これを利用しようとして試していたログになります。
ちなみにjQueryのバージョンはGoogleCodeの最新のリビジョン293を利用しました。

とりあえず、1000*10本ほどデータをプロットしてみます。
さくさく動きます(Firefoxで)。データの初期化なども簡単です。
さくさく動きます(GoogleChromeで)。プラグインも導入できるみたいです。

IEはexcanvasが必要との事で、excanvasを読み込んで
IE8で確認してみました。

さくさく動きません(IE8で)…
とりあえず目算だと…

  • Firefox & Chrome -> 1秒未満
  • IE8 ————–> 10秒以上

TODO IE8でプロファイリングして、プロファイリング結果を書く。

直接的なボトルネックはexcanvasが原因のようです…

とりあえず、(出来る範囲で)flotの設定周りからいじっていきます。

その1 影を消す

flotのデフォルト設定ではplotされる線に影の設定がされているので、これを消します。

shadowSize : 0

TODO 時間の差分

その2 plotポイントを変更

flotのplot設定はデフォルトではarc(円)になっているのでこれを、fill(四角)に変更します。
symbolで任意のcallback関数を指定する事でplotされる点をカスタマイズできます。

var options = {
	lines: { show: true },
	points: { 
		show: true,
		symbol: function(ctx, x, y, radius, shadow) {
			ctx.fillRect(x, y, 1, 1);
			//ctx.lineTo(x, y); ラインという方法もあり?
		}
	}
},

その3 plotポイントを削除

長方形でも遅いので、pointsを消します

var options = {
	lines: { show: true },
	points: { 
		show: false,
	}
},

# これちょっと悲しすぎる気が…

これで大体1/2の早さになりましたが、まだまだです。

その4 lineを消す

var options = {
	lines: { show: false },
	points: { 
		show: false,
	}
},

意味なし。既にグラフではありません。

# え?、ChromeFrameを使えって?、FlashCanvasを使えって?
# それが出来るならFlexで書きますよ、はい。

TODO 差分ロードが出来ないか検証
TODO Flot及びexcanvasをチューニング出来ないか検討

Posted in program | タグ: , , | Leave a Comment »