16042007 javascript mochikit

MochiKitのイテレータとリストを行ったり来たり

MochiKitはIter([list])でイテレータにlist(iterator)でリストになる。

で、最近お気に入りのInterpreterで動かしてみた。

>>> l = [1,2,3,4,5,6,7]
[1, 2, 3, 4, 5, 6, 7]
>>> i = iter(l)
arrayLikeIter(...)
>>> i.next()
1
>>> i.next()
2
>>> i.next()
3
>>> list(i)
[4, 5, 6, 7]

なるほど牧場。

15042007 javascript mochikit

Mochikitをまなぶ

MochiKitのSignalとかイテレータの使い方がイマイチわからんなぁと思ってたがMochiKitのテストスクリプトを読めばいいことに気がついた。

あとinterpreterを使いまくってるのと、Firebugの便利さを理解した。

15032007 ajax mochikit plotkit JSON

PlotKit+Ajaxでチャートを描画

MochiKitのチャート描画ライブラリであるPlotKitでヒストグラムを描かせてみた。

del.icio.us - Mochikit

ちょっとした折れ線チャートとかヒストグラム、パイチャートの類はPlotKit使うと便利そう(javascriptだけでできるし)。

Ajaxで試したかったので、わざわざJSON形式でファイルを別に作成しておいて、非同期で読み込ませるようにした(data.json)。

{
  "name" : "sqrt",
  "value" : [[0, 0.3],[1, 1], [2, 1.414], [3, 1.73], [4, 2]]
}

スクリプトはこんな感じで結構短い。

  function plot_async() {
    var url = 'data.json';
    var d = loadJSONDoc(url);
    var gotData = function (data) {
    var layout = new Layout("bar");
      layout.addDataset(data.name, data.value);
      layout.evaluate();

    var chart = new SweetCanvasRenderer($("chart"), layout);
    chart.render();  
    };
    var dataFetchFailed = function (err) {
      alert("data not found");
    };
    d.addCallbacks(gotData, dataFetchFailed);
  }

これで割と綺麗なグラフが作成される。

plotkit

デモも置いておく。

フレームワークに組み込めば、お手軽にチャートが作成できそうな感じだ。