Highcharts动态曲线图(使用jna监视cpu使用率)

沙舟狼客

浏览: 162306 次
性别:
来自: 北京

最近访客更多访客>>

lb201155080209

gy090028

haigangyuan2011

jazure

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Groovy/Grails
java基础
JavaScript

Highcharts jna 动态曲线 grails cpu使用率

1、CPU使用率获取，因为我要用JNA调用，所以用c++调用windowAPI，编译成Dll文件；dll的代码如下：

// DllTest.cpp : Defines the exported functions for the DLL application.
//

#include "stdafx.h"
#include "iostream"
#include "stdafx.h"
#define _WIN32_WINNT   0x0501
#include <Windows.h>
#define MYLIBAPI  extern   "C"     __declspec( dllexport ) 

/*
要返回的函数声明
*/
MYLIBAPI void getCpuInfo(int wait,double* d);

/*
函数的定义
*/
//转换FILETIME类型
__int64 CompareFileTime ( FILETIME time1, FILETIME time2 )
{
	__int64 a = time1.dwHighDateTime << 32 | time1.dwLowDateTime ;
	__int64 b = time2.dwHighDateTime << 32 | time2.dwLowDateTime ;

	return   (b - a);
}

//函数的实体
/*wait是统计多长时间内的cpu使用率
d是返回的数组
*/
void getCpuInfo(int wait,double* d){
	HANDLE hEvent;
	BOOL res ;

	FILETIME preidleTime;
	FILETIME prekernelTime;
	FILETIME preuserTime;

	FILETIME idleTime;
	FILETIME kernelTime;
	FILETIME userTime;

	res = GetSystemTimes( &idleTime, &kernelTime, &userTime );


	preidleTime = idleTime;
	prekernelTime = kernelTime;
	preuserTime = userTime ;

	hEvent = CreateEvent (NULL,FALSE,FALSE,NULL); // 初始值为 nonsignaled ，并且每次触发后自动设置为nonsignaled

	WaitForSingleObject( hEvent,wait); //等待500毫秒
	res = GetSystemTimes( &idleTime, &kernelTime, &userTime );
	int idle = CompareFileTime( preidleTime,idleTime);
	int kernel = CompareFileTime( prekernelTime, kernelTime);
	int user = CompareFileTime(preuserTime, userTime);
	//cpu使用率的计算
        double cpu = (kernel +user - idle) *100.0/(kernel+user);
	//cpu空闲率的计算
        double cpuidle = ( idle) *100.0/(kernel+user);

	d[0] =cpu;
	d[1] = cpuidle;
}

2、JNA代码的定义

package com.ligson.jna;

import com.sun.jna.Library;
import com.sun.jna.Native;

//声明
interface MyDllLib extends Library {
    /*
     DllTest.dll是我编译后的dll文件，放在项目的根目录
     */
    MyDllLib INSTANCE = (MyDllLib) Native.loadLibrary("DllTest.dll", MyDllLib.class);
    /*
    这个与c++中函数的定义一样，唯一不同的double[] d没用用指针，但是数组的本身就是指针，
     */
    public void getCpuInfo(int wait, double[] d);
}

public class GetCpuInfo {
    static MyDllLib myDllLib = MyDllLib.INSTANCE;

    public static double getCpu(int wait) {
        //声明返回值
        double[] d = new double[2];
        myDllLib.getCpuInfo(wait,d);
        return d[0];
    }
}

3、Web环境用grails框架，grails框架语法简单，各种东西定义都很方便，Controller的定义

package hf

import grails.converters.JSON

class CpuMonitorController {

  static List list = [];
  static Map result = [:];
  def index = {
    render(view: 'cpu');
  }

  def getCpuInfo = {
    double d = com.ligson.jna.GetCpuInfo.getCpu(500);
    def l = [:];
    l.x = new Date().getTime();
    l.y = d;
    list.add(l);

    result.x = l.x;
    result.y = l.y;
    //返回json格式,x轴以时间为准，y轴以cpu占有率为准
    return render(result as JSON);
  }
}

4、cpu.gsp的代码：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 12-1-10
  Time: 下午7:49
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
  <title>Simple GSP page</title>
  <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.6.js')}"></script>
  <!--这个是必须的，highChart的核心-->
  <script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts/highcharts.js')}"></script>
  <!--导出图片用的-->
  <script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts/modules/exporting.js')}"></script>
  <!--主题-->
  <script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts/themes/gray.js')}"></script>
  <script type="text/javascript">


    $(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() {
      $.post("${createLink(controller:'cpuMonitor',action:'getCpuInfo')}", {"random":Math.random()}, function(data) {
        var result = {"x":data.x,"y":data.y};

        var series = chart.series[0];
        var x = result.x; // current time
        var y = result.y;
        series.addPoint([x, y], true, true);
      }, "json");
    }
    setInterval(getCpuInfo, 1000);

  </script>
</head>
<body>
<div style="width:800px;height:400px;overflow:auto;">
  <div id="container" style="width:800px;height:400px;margin:0 auto;"></div>
</div>
</body>
</html>

5、漂亮的效果图：

6、我的dll库文件在下面，欢迎大家下载使用

DllTest.zip (11.8 KB)
下载次数: 267

查看图片附件

5
顶

1
踩

分享到：

chmod命令的用法 | grails验证码插件-JCaptcha

2012-01-10 22:30
浏览 9271
评论(12)
分类:编程语言
查看更多

12 楼沙舟狼客 2013-09-16

tiansong163 写道

你好，若我只想显示异步取到的数据要怎么做？我把初始值去掉，就有错误。

初始值随即一下，反正就1s用户也不是那么察觉

11 楼 tiansong163 2013-08-02

你好，若我只想显示异步取到的数据要怎么做？我把初始值去掉，就有错误。

10 楼沙舟狼客 2012-05-16

6tao 写道

我按照你的方法，试了一下，不成功。
我返回的数据格式也是[[时间的毫秒值，监控值],[][]...]
但是显示时x轴的时间是30 Apil，而不是如20:22,请问是怎么回事呢？

看了你的代码和样图，我发现个问题，就是你返回的时间没有做处理，显示的时候怎么是每隔5分钟呢？请问这个你是怎么做到的，还是这段代码没有贴出来？？？
希望您能解释下
[[2012-04-28 08:12:12.0,0.3],[2012-05-08 13:28:04.0,50.05]]这个是我返回的一部分数据

1、我是一秒获取一次，完全是有js，简单的请求过去

setInterval(getCpuInfo, 1000);

2、时间格式化看这里：

return '<b>' + this.series.name + '</b><br/>' +  
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +  
                    Highcharts.numberFormat(this.y, 2);

9 楼沙舟狼客 2012-05-16

6tao 写道

向您请教一个问题：就是动态曲线图上不是有一段是初始化数据吗？请问为什么要采用这个，而不是直接从数据库中去拿数据呢？

初始化时，需要判断，x和y坐标个数，然后根据这个去初始化图形。反正，这个很快，无所谓。

8 楼 6tao 2012-05-15

向您请教一个问题：就是动态曲线图上不是有一段是初始化数据吗？请问为什么要采用这个，而不是直接从数据库中去拿数据呢？

7 楼 6tao 2012-05-15

6 楼 yangchuan009 2012-02-15

您好完整的工程可以发到我邮箱吗？？ 676007871@qq.com

5 楼沙舟狼客 2012-02-12

yangchuan009 写道

你好请问你所用的开发工具有哪些呢？？？？用些什么软件呢？？？

idea10,visual studio2010

4 楼 yangchuan009 2012-02-12

完整的工程可以发到我邮箱吗？？ 676007871@qq.com

3 楼 yangchuan009 2012-02-12

你好请问你所用的开发工具有哪些呢？？？？用些什么软件呢？？？

2 楼沙舟狼客 2012-01-16

zhaoyijun 写道

表示膜拜，求完整代码，sevencactus@163.com

其实代码我已经粘上去完了

1 楼 zhaoyijun 2012-01-12

表示膜拜，求完整代码，sevencactus@163.com

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论