jsp页面展示cpu使用率曲线图
日期：2014-05-16 浏览次数：20370 次
jsp页面显示cpu使用率曲线图
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/autocomplete.jsp"%>
<%@ include file="/common/rails.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${ctx}/js/m_js/chart/highcharts.js" type="text/javascript"></script>
<script src="${ctx}/js/m_js/chart/modules/exporting.js" type="text/javascript"></script>
<script src="${ctx}/js/m_js/chart/themes/gray.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
setInterval("getCpuInfo()", 1000);
});
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
//声明报表对象
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
marginRight: 10
},
title: {
text: 'CPU使用率动态曲线图'
},
xAxis: {
title: {
text: '时间'
},
//linear" or "datetime"
type: 'datetime',
//坐标间隔
tickPixelInterval: 150
},
yAxis: {
title: {
text: '使用率'
},
//指定y=3直线的样式
plotLines: [
{
value: 0,
width: 10,
color: '#808080'
}
]
},
//鼠标放在某个点上时的提示信息
//dateFormat,numberFormat是highCharts的工具类
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
//曲线的示例说明，像地图上得图标说明一样
legend: {
enabled: true
},
//把曲线图导出成图片等格式
exporting: {
enabled: true
},
//放入数据
series: [
{
name: 'CPU使用率',
data: (function() {
// 初始化数据
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random() * 100
});
}
return data;
})()
}
]
});
getCpuInfo();
});
function getCpuInfo() {
var url='monitortree!cpurpt.action';
$.post(url,{},function(data){
/* for(var i=0;i<data.length;i++){
alert(data[i].x);
} */
for(var i=0;i<data.length;i++){
var result = {"x":data[i].x,"y":data[i].y};
var series = chart.series[0];
var x = result.x; // current time
var y = result.y;
series.addPoint([x, y], true, true);
}
}, "json");
//});
}
</script>
</head>
<body onLoad="switchTab('TabPage1','Tab2');">
<jsp:include page="toolbar.jsp?barName=${param.barName}"/>
<div style="width:800px;height:400px;overflow:auto;">
<div id="container" style="width:800px;height:400px;margin:0 auto;"></div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
