jQueryでグラフを書く

集計データをグラフ化したいなー、ということでどういう道具が使えるの探してみました。
以前、河合さんがFlashで描くライブラリについて取り上げていたのだけれど、iOS系で表示できないとやだね、ということで、Flashじゃないものを探してみました。

で、まずは、Google Chart API
Googleさんが、Web baseのAPIとして提供しているもの。Analyticsの中でも使われているとか。
GETのQUERY STRINGで値を渡すらしい。描画はサーバサイドの画像処理ですね。
データが外に漏れるのを嫌うシチュエーションでは使いにくそうです。

JavaScript系はどんなかなというところで、出てきたのがflot
こちらは、jQuery系プラグインで、シンプルにまとまっていてよさそう。Canvasに描画するんですね。
使うのも比較的簡単。divのプレースホルダをもってきて、$.plot() というメソッドに、データと
オプションの配列と一緒に渡す。シンプル。

コードはこんな感じ

$(document).ready(function() {
	var data_results_cumulative = [[1301270400000,0],[1301875200000,8.25],[1302480000000,22],[1303084800000,29],[1303689600000,36.5]];
	var data_plan_cumulative = [[1301270400000,12],[1301875200000,24],[1302480000000,36],[1303084800000,48],[1303689600000,60]];
	var data_firstplan_cumulative = [[1303689600000,16]];
	var ticks = [1301270400000,1301875200000,1302480000000,1303084800000,1303689600000];

	$.plot($("#graph"), [
		{ label: "results", data: data_results_cumulative, color: 2},
		{ label: "plan", data: data_plan_cumulative, color: 0},
		{ label: "first plan", data: data_firstplan_cumulative, color: 1},
	],
	{
		series: {
			lines: { show: true },
			points: { show: true }
		},
		legend: {
			position: "nw"
		},
		xaxis: {
			mode: "time",
			timeformat: "%y-%m-%d",
			tickSize: [7, "day"],
			ticks: ticks
		},
		yaxis: {
			ticks: 10,
			min: 0,
		},
		grid: {
			backgroundColor: { colors: ["#fff", "#eee"] },
		}
	});

});