`

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>
分享到：
| 两个jsp传值后 param取值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics