標準グラフ

カテゴリー別棒グラフ

リアルタイムグラフ

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.flot.js"></script>
<script>
	$(window).load(function(){
		var _d1 = [];
		for (var i = 0; i < 14; i += 0.5) {
			_d1.push([i, Math.sin(i)]);
		}
		var _d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
		var _d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
		$.plot('#FlotDemo01', [_d1, _d2, _d3]);
		
		var _data = [ ['January', 10], ['February', 8], ['March', 4], ['April', 13], ['May', 17], ['June', 9] ];
		$.plot('#FlotDemo02', [ _data ], {
			series: {
				bars: {
					show: true,
					barWidth: 0.6,
					align: 'center'
				}
			},
			xaxis: {
				mode: 'categories',
				tickLength: 0
			}
		});		
		
		var _data2 = [],
		totalPoints = 300;			
		function getRandomData() {
			if (_data2.length > 0)
				_data2 = _data2.slice(1);
		
			while (_data2.length < totalPoints) {	
			var prev = _data2.length > 0 ? _data2[_data2.length - 1] : 50,
			y = prev + Math.random() * 10 - 5;	
			if (y < 0) {
				y = 0;
			} else if (y > 100) {
				y = 100;
			}	
			_data2.push(y);
			}
		
			var res = [];
			for (var i = 0; i < _data2.length; ++i) {
				res.push([i, _data2[i]])
			}
		
			return res;
		}

		var _plot = $.plot('#FlotDemo03', [ getRandomData() ], {
			series: {
				shadowSize: 0	// Drawing is faster without shadows
			},
			yaxis: {
				min: 0,
				max: 100
			},
			xaxis: {
				show: false
			}
		});

		var _timer = setInterval(function(){
			_plot.setData([getRandomData()]);
			_plot.draw();
		}, 30);
	});
</script>
<p class="title">標準グラフ</p>
<div id="FlotDemo01" class="Flot-demo"></div>

<p class="title">カテゴリー別棒グラフ</p>
<div id="FlotDemo02" class="Flot-demo"></div>

<p class="title">リアルタイムグラフ</p>
<div id="FlotDemo03" class="Flot-demo"></div>

Flotについて

Flotは、とても豊富な機能を備えたグラフ描画プラグインです。
描画にはcanvasを利用するので、canvas対応のブラウザでしか利用できませんが、機能がほんとに色々あるので、是非一度デモを要チェックや!
高機能の引き換えに若干設定が面倒。グラフのタイプ毎にjsを読み込む必要があり。
IE8以下で使う場合はexcanvas.jsも一緒に読み込む必要あり。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Chart

    Chart

    バラエティー豊富でインタラクティブなグラフを設置できる

  • Knob

    Knob

    ついつい回したくなる円グラフを設置できる

  • Peity

    Peity

    SVGを利用して色々なグラフをブラウザ上に描画できる