MochiKitのチャート描画ライブラリであるPlotKitでヒストグラムを描かせてみた。
ちょっとした折れ線チャートとかヒストグラム、パイチャートの類は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); }
これで割と綺麗なグラフが作成される。
デモも置いておく。
フレームワークに組み込めば、お手軽にチャートが作成できそうな感じだ。