jQueryベースでクールなグラフを作成するjavascript「Flot」

PlotkitやPlotorなど各ライブラリにはそれぞれ奇麗なグラフを作成できるプラグインがありました。
jQueryでもFlotとよばれるクールなグラフを作成できるプラグインが登場しました。

使用方法

Flotからjquery.flot.jsをjQueryからjquery.js（v1.2.1）をダウロードします。

<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.flot.js"></script>

さらにグラフを表示させたい場所に以下を記述します。

<div id="placeholder" style="width:横幅;height:高さ;"></div>

最後にグラフの数値や種類を書き込むと完成です。

<script type="text/javascript">
$(function () {
    var Demo = [[0, 3], [4, 8], [8, 5], [10, 13]]; //Demoの部分は自由です
    $.plot($("#placeholder"), [ 
		{ label : "項目名", data: Demo,	//Demoは上記で記述したものです
		lines: { show: true}	//線グラフ：lines、棒グラフ：bars、点：points
    },	
	]);
});
</script>

サンプル

Javascriptサンプルページ一覧

skuare.net