JQuery和flot插件结合动态显示服务器CPU及内存状态

JSP代码：

Html代码  

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

 

JS:

Js代码  

1. var options = {  
2.         series: { color: '#0ff' },  
3.         yaxis: { min:0, show: false },  
4.         xaxis: { show: false },  
5.         grid: { show: false}  
6.     };  
7.   
8. var cpuBuf = [], memBuf = [], totalPoints = 104;  
9. $('#cpuChart').everyTime('2ds', 'monitor', function(){  
10.     $.ajax({  
11.         type: "post",  
12.         url: '<%=request.getContextPath()%>/monitor',  
13.             dataType : "json",  
14.             success : function(result) {  
15.                 if (cpuBuf.length > totalPoints)  
16.                     cpuBuf = cpuBuf.slice(cpuBuf.length-totalPoints);  
17.                 if (memBuf.length > totalPoints)  
18.                     memBuf = memBuf.slice(memBuf.length-totalPoints);  
19.                 cpuBuf.push(result.cpuUsage);  
20.                 memBuf.push(result.memUsage);  
21.                   
22.                 var cpuArr = [], memArr = [];  
23.                 for (var i = 0; i<cpuBuf.length; i++){  
24.                     cpuArr.push([i, cpuBuf[i]]);  
25.                     memArr.push([i, memBuf[i]]);  
26.                 }  
27.                 var cpuData = [{data: cpuArr, color: '#0f0'},{data: memArr, color: '#00f'}];  
28.                   
29.                 $.plot($("#cpuChart"), cpuData, options);  
30.             }  
31.         });  
32.     }, 0, true);  

 

最关键的地方是绘制前数组参数的传入：

Js代码  

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

 这里定义了基本的cpu和内存占用率的一维数组。

 

Js代码  

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

 这里将一维数组变为二维数组，加了下标用做x轴。

 

Js代码  

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

 然后转换为plot能接受的对象参数。