jQueryのプラグインjqPlotでタスクマネージャのような動的なグラフを作ってみる

前回jqPlotでとりあえずグラフを表示させてみたので、今回は動くグラフを作成してみたいと思います。作成するイメージは右図のような感じですが、そこまで細かく表示させるのは割愛します。

あと、実際にCPU使用率を取得したり等のデータは、jQuery外の話になるので擬似的に表示を行うために、タイマーと値を上下させる乱数で実装してみます。

サンプルソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jqPlottest</title>
		<meta name="author" content="prog" />
		<!-- Date: 2011-12-26 -->
		<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css">
		<script type="text/javascript" src="./lib/jquery.min.js"></script>
		<script type="text/javascript" src="./lib/jquery.jqplot.min.js"></script>
	</head>
	<script type="text/javascript">
		var widthSize=50;			// 50刻みで表示
		var gbls1 = new Array();	// グラフの値を格納
		var gbleCnt = 0;
		// 初期化処理
		$(document).ready(function() {
		    // グラフデータを格納する配列を初期化
			for(idx=0;idx<widthSize-1;idx++) {
				gbls1.push(null);
			}
			// タスクマネージャのCPU使用率ように0スタートのため最後に0を格納
			gbls1.push(0);
			setTimeout("display()",1000);		    
		});
		
		function display() {
			// ０～99までのランダムな数字を取得
			var randnum = Math.floor( Math.random() * 100 );
			gbls1.push(randnum);

			if( gbls1.length > widthSize) {
				// 古いデータを削除
				gbls1.shift();
			}
			
			// グラフを描画
			$.jqplot('graf', [ gbls1 ],{
				title:'Random value',
				seriesDefaults: {
					color: '#22de41',　// グラフの色
					lineWidth: 1.5,	  // グラフの線の太さ
					showMarker:false　　// 値の点を非表示
				},
				axes: {
					yaxis:{			// Y軸の設定
						min:0,
						max:100
					},
					xaxis:{			// X軸の設定
						min:1,
						max:widthSize,
						showTicks:false　// X軸の値を非表示
					}
				},
				grid: {
					gridLineColor: '#149262',	// 格子の色
					background: '#000000',		// 背景の色
					borderColor: '#149262'		// 枠の色
				}
			}).replot();
			gbleCnt++;
			setTimeout("display()",1000);
		}
		
	</script>
	<body>
		<div id="graf" style="width:600px;height:300px"></div>
	</body>
</html>

だいたい、ソース内のコメントにある通りですが、display()を繰り返し実行することで、乱数を生成しその値でグラフを描画し直しています。繰り返しの処理は1000msのタイマーで呼んでいます。

Demo Page

気になった所だけ以下に。

初期化処理

前回のソースにあるように、配列に値を入れるだけのグラフのためfor文で配列を初期化しています。分解すると、

gbls1 = [null, null, null, ・・・・（中略）・・・null, 0]

という初期化をしています。タスクマネージャのように、右からグラフが流れてくるのを演出するためです。あとはsetTimeoutでdisplay()メソッドを1000msで呼んでいます。

displayメソッド

大きくわけると、

乱数を生成し配列へ格納

グラフを再描画

１秒後にdisplayメソッドを呼ぶタイマーをセット

といった所ですかね。１番目は乱数を生成して配列gbls1に追加しています。表示領域以上のデータ数だと古いデータを削除します。

グラフの描画は、replot()している所がアニメーションのポイントです。これをしないと重ねて表示されます。また、グラフ描画でやってることは、ほとんどが背景色やグラフの色などの設定です。なので、これを何度も何度もreplot()させるのは無駄な処理をさせているような気もします。が、ソースをシンプルにするために敢えてこうしました。

詳しい設定等は、ドキュメントや公式サンプルで。

・jqPlot Usage

http://www.jqplot.com/docs/files/usage-txt.html

・Examples | jqPlot

http://www.jqplot.com/tests/

websocketなどで連携させると面白いかもしれませんね。

takaiwa.net

このブログを検索