ひよっこ。

I want to…

Posts Tagged ‘jQuery’

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 »

jQueryでtablesorterを利用した場合にソートのカスタマイズを行う方法

Posted by hikaruworld : 2011 2月 8

jQuery1.4.4
tablesorter2.0

jQueryのプラグインの一つであるtablesorterを利用すると簡単にテーブルのソート処理を実装する事が出来ます。
基本的に空気を読んでソート処理をしてくれるんですが、
たまにカスタマイズしたくなるので、その方法を忘れないようにメモしておきます。

Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily

ドキュメントにあるように、とあるように、基本的には上記のようなフィールドのソートに対応しています。

以下サンプルコードから。addParserでパーサーを設定します

  $.tablesorter.addParser({ 
      // パーサのidを設定
      id: 'grades', 
      // false時に自動でのソートを行わない
      is: function(s) { 
          return false; 
      }, 
      // ソートの実装
      format: function(s) { 
          // 対象の値に対して表示順をindexで指定
          return s.replace(/good/,2).replace(/medium/,1).replace(/bad/,0); 
      }, 
      // set type, either numeric or text 
      type: 'numeric' 
  }); 

利用時はIDを指定して、該当の動作を制御します。

    $(function() { 
        $("table").tablesorter({ 
            headers: { 
                6: { 
                    sorter:'grades' 
                } 
            } 
        }); 
    });                  

以上です。

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