jqplot通过ajax动态画折线图的方法及思路

效果如图所示,每个五秒钟图会移动一次(其实是重新画了一张图),能显示所监控的cpu信息。

pastCpuInfomation函数主要用来显示一张折线图

updateCpuPic函数把5秒前的图去掉,重新根据现有数据画一张图。

updateCpuInfomation函数 把最新的点加入存储折线的数组中

再接着在界面中弄两个定时器,让他们每个5秒执行一次updateCpuPic,每个1分钟执行一次updateCpuInfomation,图画就动起来了。

PS:代码中执行好多操作前都会在服务器中获取下服务器的当前时间 ,ajax写得有点乱,我也不知道规不规范,实现动态图的方法好像也不是太好,最好是能直接更新线的数据的,希望朋友们多多指教!画表的代码已经标红(30行到60行)


代码如下:

var past_cpu_service_statistics_line = new Array();
var plot;
function pastCpuInfomation() {
    // 历史cpu数据
    // 本地时间

$.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        url: globalObj.path + '/server/getServerCurrentTime.htm',
        success: function(currentTime){
            console.log("取到服务器时间"+currentTime);
            //获取历史cpu数据
            $.ajax({
                type: "POST",
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                url: globalObj.path + '/server/getPastCpuMonitorData.htm',
                // startTime endtime 是伪数据,时间在后台获取
                data: "hostName=" + "login.cheos.cn",
                success: function(result){

for (key in result) {
                        // 去得到时间转化为int
                        var intKey = parseInt(key);
                        var transferTime = new Date(intKey);
                        console.log("transferTime:"+ key + "----resut:" + transferTime);
                        var onePoint = [transferTime, result[key] ];
                        past_cpu_service_statistics_line.push(onePoint);
                    }
                   <span style="color:#ff0000;"> // 历史cpu情况表
                    plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line ],
                            {
                                axes: {
                                    xaxis: {
                                        label: '时间',
                                        renderer: $.jqplot.DateAxisRenderer,
                                        tickOptions: {
                                            formatString: '%Y-%#m-%d %H:%M'
                                        },
                                        min : (currentTime -1000 * 60 * 60),
                                        max: (currentTime),

// 横(纵)坐标显示的最小值
                                    // ticks:['']

},
                                    yaxis: {
                                        label: 'cpu监控',

}
                                },
                                highlighter: {
                                    show: true,
                                    sizeAdjust : 7.5
                                },
                                cursor: {
                                    show: false
                                }
                            });
 </span>
                },
                error: function(textStatus){
                    alert("获取监控信息失败!");
                }
            });
            //获取历史cpu数据ajax结束
        },
        error: function(textStatus){
            alert("取历史cpu数据时候获取服务器时间失败!");

}
    });

}
function updateCpuPic() {
    console.log("正在更新cpu视图");
//先取得服务器时间,用来画横坐标
    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        url: globalObj.path + '/server/getServerCurrentTime.htm',
        success: function(result){
            var intKey =parseInt(result);
            var transferTime = new Date(intKey);
            console.log("获取到服务器时间:"+result+"------"+transferTime);
        //操作图表
            //如果已经存在图表,则摧毁
            if (plot) {
                // plot.destory();
                $("#cpuHistory").unbind();
                $("#cpuHistory").empty();
                plot= null;

}
            //重新画图表
            plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line ], {
                axes: {
                    xaxis: {
                        label: '时间',
                        renderer: $.jqplot.DateAxisRenderer,
                        tickOptions: {
                            formatString: '%Y-%#m-%d %H:%M'
                        },
                        min: (result - 1000 * 60 * 60),
                        max: (result),

// 横(纵)坐标显示的最小值
                    // ticks:['']

},
                    yaxis: {
                        label: 'cpu监控',

}
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: false
                },
                replot: {
                    resetAxes: true
                }
            });

},
        error: function(textStatus){
            alert("获取服务器时间失败!");

}
    });

}

function updateCpuInfomation() {
    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        url: globalObj.path + '/server/getLatestCpuMonitorData.htm',
        data: "hostName=" + "login.cheos.cn",
        success: function(result){
            // 更新一次数据
            for (key in result) {
                var intKey = parseInt(key);
                var transferTime = new Date(intKey);
                console.log("----------------更新cpu信息---:" + key + "----更新时间:" + transferTime);
                var onePoint = [transferTime, result[key] ];
                past_cpu_service_statistics_line.push(onePoint);
            }
            // 更新图表
        //  updateCpuPic();
        },
        error: function(textStatus){
            alert("更新cpu信息失败!");

}
    });

}

(0)

相关推荐

  • JavaScript可视化图表库D3.js API中文参考

    D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl

  • C#画图之饼图折线图的实现方法

    本文实例讲述了C#画图之饼图折线图的实现方法,是C#程序设计中非常实用的技巧.分享给大家供大家参考.具体方法分析如下: 显示图像的控件定义如下: public PlaceHolder PlaceHolder1; 各个图像的类别名称如下: PictureType    图形种类    5    chChartTypeBarClustered    簇状条形图    0    NULL PictureType    图形种类    7    chChartTypeBarClustered3D   

  • ASP生成柱型体,折线图,饼图源代码提供了第1/3页

    ASP生成柱型体,折线图,饼图源代码 <% function table2(total,table_x,table_y,all_width,all_height,line_no) '参数含义(传递的数组,横坐标,纵坐标,图表的宽度,图表的高度,折线条数) '纯ASP代码生成图表函数2--折线图 '作者:龚鸣(Passwordgm) QQ:25968152 MSN:passwordgm@sina.com Email:passwordgm@sina.com '本人非常愿意和ASP,VML,FLASH

  • D3.js 从P元素的创建开始(显示可加载数据)

    D3是一个基于数据操作的可视化js库,认识d3,就从最基础的显示可加载数据谈起. html的基本框架不多说,先上代码再解释: 新建一个test目录,在该目录下创建demo和d3两个文件夹.demo存放要编写的html文件 , d3存放d3.v3.js 在demo文件夹下新建indexP.html,将下面代码复制其中,双击在浏览器打开查看效果. <!DOCTYPE html> <html lang="en"> <head> <meta chars

  • 基于d3.js实现实时刷新的折线图

    先来看看效果图 下面直接上源代码,html文件 <html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-seri

  • asp.net画曲线图(折线图)代码 详细注释

    复制代码 代码如下: using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI

  • PHP中使用GD库绘制折线图 折线统计图的绘制方法

    在PHP中,有一些简单的图像函数是可以直接使用的,但大多数要处理的图像,都需要在编译PHP时加上GD库.除了安装GD库之外,在PHP中还可能需要其他的库,这可以根据需要支持哪些图像格式而定.GD库可以在http://www.boutell.com/gd/免费下载,不同的GD版本支持的图像格式不完全一样,最新的GD库版本支持GIF.JPEG.PNG.WBMP.XBM等格式的图像文件,此外还支持一些如FreeType.Type 1等字体库.通过GD库中的函数可以完成各种点.线.几何图形.文本及颜色的

  • php下实现折线图效果的代码

    <?php   Class ImageReport{  var $X;//图片大小X轴  var $Y;//图片大小Y轴  var $R;//背影色R值  var $G;//...G.  var $B;//...B.  var $TRANSPARENT;//是否透明1或0  var $IMAGE;//图片对像  //-------------------  var $ARRAYSPLIT;//指定用于分隔数值的符号  var $ITEMARRAY;//数值  var $REPORTTYPE;//

  • jQuery实现折线图的方法

    本文实例讲述了jQuery实现折线图的方法.分享给大家供大家参考.具体如下: 效果图如下所示: js引用: 复制代码 代码如下: <script src="Js/Index/jquery-1.5.2.min.js" type="text/javascript"></script>  <script src="js/Index/raphael.2.1.0.min.js" type="text/javascri

  • D3.js中data(), enter() 和 exit()的问题详解

    D3的应用非常广泛,现在成为了主流数据可视化工具之一.大家在刚接触使用d3.js的时候,感到最吃力的地方是data(), enter(), exit()这几个操作. 在我接触一段时间,有了一些了解之后,简单说说我的理解. data() 先看一个例子: <body> <p></p> <p></p> <p></p> </body> 执行代码: d3.select("body").selectAl

随机推荐