JQueryとflotプラグインを組み合わせてサーバCPUとメモリの状態を動的に表示する

JSPコード:

<div>
	<div id="cpuChart"
		style="width: 312px; height: 100px; float: left; margin: 0px; border: solid black 1px;"></div>
	<span>CPU&Mem</span>
</div>

 
JS:

var options = {
        series: { color: '#0ff' },
        yaxis: { min:0, show: false },
        xaxis: { show: false },
        grid: { show: false}
    };

var cpuBuf = [], memBuf = [], totalPoints = 104;
$('#cpuChart').everyTime('2ds', 'monitor', function(){
	$.ajax({
		type: "post",
		url: '<%=request.getContextPath()%>/monitor',
			dataType : "json",
			success : function(result) {
				if (cpuBuf.length > totalPoints)
					cpuBuf = cpuBuf.slice(cpuBuf.length-totalPoints);
				if (memBuf.length > totalPoints)
					memBuf = memBuf.slice(memBuf.length-totalPoints);
				cpuBuf.push(result.cpuUsage);
				memBuf.push(result.memUsage);
				
	        	var cpuArr = [], memArr = [];
		        for (var i = 0; i<cpuBuf.length; i++){
		        	cpuArr.push([i, cpuBuf[i]]);
		        	memArr.push([i, memBuf[i]]);
		        }
		        var cpuData = [{data: cpuArr, color: '#0f0'},{data: memArr, color: '#00f'}];
		        
		        $.plot($("#cpuChart"), cpuData, options);
			}
		});
	}, 0, true);

 
最も重要なのは、描画前の配列パラメータの入力です.

var cpuBuf = [], memBuf = [], totalPoints = 104;

ここでは、基本的なcpuとメモリ占有率の1次元配列を定義します.
 

var cpuArr = [], memArr = [];
for (var i = 0; i<cpuBuf.length; i++){
	cpuArr.push([i, cpuBuf[i]]);
	memArr.push([i, memBuf[i]]);
}

ここでは1次元配列を2次元配列に変更し,x軸として下付きを加えた.
 

var cpuData = [{data: cpuArr, color: '#0f0'},{data: memArr, color: '#00f'}];

次にplotが許容できるオブジェクトパラメータに変換します.