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

JSP代码：

Html代码  


<div>  

    <div id="cpuChart"  

        style="width: 312px; height: 100px; float: left; margin: 0px; border: solid black 1px;"></div>  

    <span>CPU&Mem</span>  

</div>  

 

JS:

Js代码  


var options = {  

        series: { color: '#0ff' },  

        yaxis: { min:0, show: false },  

        xaxis: { show: false },  

        grid: { show: false}  

    };  

  

var cpuBuf = [], memBuf = [], totalPoints = 104;  <
4000
/span>

$('#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);  

 

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

Js代码  


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

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

 

Js代码  


var cpuArr = [], memArr = [];  

for (var i = 0; i<cpuBuf.length; i++){  

    cpuArr.push([i, cpuBuf[i]]);  

    memArr.push([i, memBuf[i]]);  

}  

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

 

Js代码  


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

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