`

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取值
评论
发表评论

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

相关推荐

    jsp 曲线图显示 FusionChartsFree

    7. **部署与测试**: 保存JSP文件，启动你的Web服务器，然后在浏览器中访问该页面，你应该能看到生成的曲线图。 通过以上步骤，你可以在JSP环境中成功展示FusionCharts Free的曲线图。这不仅有助于理解数据，还能为...

    在jsp页面中显示流程图

    总之，要在JSP页面中显示流程图，开发者可以选择手写SVG，使用图形库，或者结合后端数据动态生成。无论哪种方法，都需要对HTML、CSS、JavaScript有一定的掌握，并可能涉及到SVG或图形库的学习。通过实践和不断探索，...

    图片直接保存到数据库，并在JSP页面显示

    标题“图片直接保存到数据库，并在JSP页面显示”涉及的知识点主要集中在Web开发领域，尤其是Java Web开发，包括图片处理、数据库存储以及前端展示。这里我们将深入探讨以下几个关键环节： 1. 图片数据的二进制化：...

    JSP+JFreeChart 实现曲线图、柱形图

    在"JSP+JFreeChart 实现曲线图、柱形图"的项目中，开发者首先需要在JSP页面中引入JFreeChart的相关库。这通常通过在页面头部添加JAR依赖或者使用Maven或Gradle等构建工具来完成。然后，我们需要在Java后端代码中创建...

    jsp检测内存，并绘制曲线图.rar

    这个名为"jsp检测内存，并绘制曲线图.rar"的压缩包文件包含了一个独特的应用，该应用利用JSP环境来监控服务器的内存使用情况，并通过绘制曲线图的形式直观地展示这些数据。 首先，我们要理解的是JSP如何与服务器...

    JSP页面显示PDF，根据PDF路径在JSP页面显示PDF

    在JSP页面中，我们可以通过创建一个iframe或者使用JavaScript来加载PDF文件的URL，让浏览器处理显示。 标题“JSP页面显示PDF，根据PDF路径在JSP页面显示PDF”意味着我们要依据PDF文件在服务器上的存储路径来生成...

    JSP页面使用百度地图定位

    在JSP中使用百度地图API，我们需要在页面中引入相关的JavaScript库，这通常通过在标签内添加标签完成，确保引入百度地图的CDN链接。 接着，我们需要在SpringMVC的控制器中处理经纬度数据。这可能涉及到从前端获取...

    jfreechart各类曲线图JSP代码

    JFreeChart是一组功能强大、灵活易用的Java绘图API，使用它可以生成多种通用性的报表，包括柱状图、饼图、曲线图、甘特图等。它能够用在Swing和Web等中制作自定义的图表或报表，并且得到广泛的应用。本文将通过引领...

    jsp页面加载时提示loading

    你可以检查服务器的CPU、内存使用情况，确保没有过高的负载。同时，优化数据库查询，减少不必要的计算，也能提升服务器响应速度。 3. **网络状况**：网络延迟或带宽不足也可能导致“loading”提示出现。用户可以...

    jsp页面显示数据库中的表

    通过JSP页面访问数据库 在JSP中设计java代码实现连接数据库 然后显示在 JSP页面中

    使用servlet，jdbc将mysql中数据显示在jsp页面中

    在这个项目示例中，我们将深入探讨如何使用这些技术将MySQL数据库中的数据呈现到JSP页面上。 首先，我们需要了解Servlet。Servlet是Java平台上的一个标准接口，用于扩展服务器的功能，特别是处理HTTP请求。在本项目...

    JSP页面查询显示常用模式

    JSP页面查询显示常用模式 JSP页面查询显示常用模式 JSP页面查询显示常用模式 JSP页面查询显示常用模式 JSP页面查询显示常用模式

    JSP页面文本编辑器

    为了提高开发效率，JSP页面通常会配合使用文本编辑器，这些编辑器提供了丰富的功能，如图片上传、字体修改和样式调整，使得开发者能够更便捷地编写和预览网页内容。本篇将深入探讨"JSP页面文本编辑器"这一主题，尤其...

    jsp页面循环显示

    jsp页面循环显示的代码，在jsp页面中添加一个循环，把list中的内容循环显示在jsp页面中的方法，代码是例子。

    5种JSP页面显示为乱码的解决方法

    在JSP编程中，开发者经常会遇到页面显示乱码的问题，这不仅影响了用户界面的美观，也可能会导致数据处理的错误。本篇文章将详细介绍五种常见的JSP页面乱码问题及其解决方案。 1. JSP页面显示乱码 这通常是由于字符...

    JSP 登录跳转页面

    在本节中，我们将详细介绍 JSP 登录跳转页面的实现细节，包括首页登录页面、判断 check 页面和最后的成功登录显示页面。 首页登录页面 首页登录页面是用户登录系统的入口点。该页面是使用 JSP 语言编写的，名称为 ...

    Jsp中显示本地图片预览

    在JSP（JavaServer Pages）中，显示本地图片预览是一项常见的需求，特别是在网页开发中。JSP是一种基于Java的动态网页技术，它允许开发者在HTML、XML或其他标记语言中嵌入Java代码，以实现服务器端的数据处理和动态...

    JSP商品详细信息页面

    在IT行业中，JSP（JavaServer Pages）是一种用于创建动态网页的技术，特别是在电子商务网站中，商品详细信息页面是至关重要的。这个"JSP商品详细信息页面"项目可能涉及到多个技术层面，包括前后端交互、数据库操作、...

    jsp页面显示百度地图api并获取经纬度

    是个人在公司里边做项目的时候，百度+个人思考摸索出来的，有什么错误，请原谅

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