Drkcore

15 03 2007 ajax mochikit plotkit JSON Tweet

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

デモも置いておく。

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

About

  • もう5年目(wishlistありマス♡)
  • 最近はPythonとDeepLearning
  • 日本酒自粛中
  • ドラムンベースからミニマルまで
  • ポケモンGOゆるめ

Tag

Python Deep Learning javascript chemoinformatics Emacs sake and more...

Ad

© kzfm 2003-2021