在上一章我们提到了如何画实时更新图,而这一章就要教你们如何利用AJAX去后端抓数据回来做实时更新图.

系统负载实时更新图(AJAX)

我们直接拿上一章的范例来做修改,在这里只说明有修改到的部份,有任何不清楚的地方,你也可以随时回到上一章去查看.

准备资料

首先,因为我们画的是系统负载图,所以先建立3个数组分别叫做cpu和cpuCore及disk,接着就先呼叫initData()建立出初始数据.

var cpu = [], cpuCore = [], disk = [];

var dataset;

var totalPoints = 100;

var updateInterval = 1000;

var now = new Date().getTime();

function initData() {

for (var i = 0; i < totalPoints; i++) {

var temp = [now += updateInterval, 0];

cpu.push(temp);

cpuCore.push(temp);

disk.push(temp);

}

}

建立更新图表函式

接着建立一个自定函式叫update(),这个函式需要带入一个参数叫_data,这个参数就是等下从后端抓回来的数据.在函式里一开始我们先把储存数据的数组里的第一个项目移除,然后再把从后端抓回来的数据插入到数组里,之后我们又再一次的修改dataset里的数据,我们把label属性的数据值都加上我们刚抓回来的数据,这样就可以在图例中看到数值的变化.最后再重新呼叫$.plot让图表重新绘制.

var temp;

function update(_data) {

//remove first item of array

cpu.shift();

cpuCore.shift();

disk.shift();

now += updateInterval

//add the data retrieve from backend to array

temp = [now, _data.cpu];

cpu.push(temp);

temp = [now, _data.core];

cpuCore.push(temp);

temp = [now, _data.disk];

disk.push(temp);

//update legend label so users can see the latest value in the legend

dataset = [

{ label: "CPU:" + _data.cpu + "%", data: cpu, lines: { fill: true, lineWidth: 1.2 }, color: "#00FF00" },

{ label: "Disk:" + _data.disk + "KB", data: disk, color: "#0044FF", bars: { show: true }, yaxis: 2 },

{ label: "CPU Core:" + _data.core + "%", data: cpuCore, lines: { lineWidth: 1.2}, color: "#FF0000" }

];

//redraw the chart

$.plot($("#flot-placeholder1"), dataset, options);

//prepare for next update

setTimeout(GetData, updateInterval);

}

从后端抓回来的数据对象

{"cpu":47, "core":11, "disk":550}

AJAX

我们用jQuery.ajax()来取回后端的资料

function GetData() {

//set no cache

$.ajaxSetup({ cache: false });

$.ajax({

url: "http://static.jqueryflottutorial.com/AjaxUpdateChart.aspx",

dataType: 'json',

success: update, //if success, call update()

error: function () {

//if fail, prepare next update

setTimeout(GetData, updateInterval);

}

});

}

后端程序

因为我们没办法真正的取得CPU loading的数据,所以我们是用随机数生成数据来仿真,最后再以JSON格式输出.

C#后端程序(AjaxUpdateChart.aspx)

protected void Page_Load(object sender, EventArgs e)

{

Page.Controls.Clear();

Random rnd = new Random();

int CPUloading = rnd.Next(0, 100);

int CPUcore = CPUloading - 30 < 0 ? 0 : rnd.Next(0, CPUloading - 30);

int Disk = rnd.Next(56, 1024);

Response.Write("{\"cpu\":" + CPUloading + ", \"core\":" + CPUcore + ", \"disk\":" + Disk + "}");

}

ajax实现重新绘图,如何画Flot AJAX更新图相关推荐

  1. flot.js ajax,如何画Flot实时更新图

    实时更新图表可以用到的地方有很多,如CPU负载图.内存用量图或是像在线人数图等,在这我们会用CPU负载图做为范例. CPU负载实时更新图 所需要的档案 所有的档案都需加到 里, 因为我们有用到时间格式 ...

  2. 拜师————python基础入门——守破离学习法,海龟绘图,画出奥运五环图,day3

    第六节课:任务6:006.简单错误如何处理_守破离学习法_程序员修炼手册 刚刚开始学习python,编程常常会出现一系列错误,建议采用一种学习方法来学习: 守 破 离 (这个是学习常识) 老师出的书: ...

  3. python_海龟绘图_画出奥运五环图---python工作笔记014

    然后我们再用海龟绘图去,画个奥运五环 去新建一个文件 首先引入turtle海龟绘图程序包

  4. 20200929 008.海龟绘图_画出奥运五环图

    绘制奥运五环标记 源码: #绘制奥运五环 import turtle turtle.width(10) turtle.color("blue") turtle.circle(50) ...

  5. FlexChart: 针对AJAX的Flash绘图应用

    FlexChart: 针对AJAX的Flash绘图应用 作者 Jon Rose   译者 崔康 FlexChart是一款开源的Flash应用,用在AJAX程序中.该绘图应用是通过XML动态驱动的.Ba ...

  6. Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生

      最近开始学习Asp.net中的AJAX,可能我的高手朋友们会说:"走还不稳呢!怎么就想学跑了?"呵呵!主要是我在做项目中体会到AJAX真的是很好的一门技术,应该好好的学习一下, ...

  7. jquery ajax 与 flask 传输 json 并且 提取ajax数据作为全局变量

    jquery ajax 与 flask 传输 json 并且 提取ajax数据作为全局变量 jquery <!DOCTYPE html> <html lang="en&qu ...

  8. [转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]

    转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...

  9. java绘图机器猫_用绘图语句画机器猫(初学 C 语言的同学必看)

    学编程最需要注意的就是多动手,多练习.不管你学了多少,学一点,就要练习一点.哪怕没有学习循环和判断,都可以写出一些不错的程序来. 所以,我写了这个范例程序给大家参考.希望可以抛砖引玉,给初学 C 语言 ...

最新文章

  1. windows下git bash乱码问题
  2. 【青少年编程竞赛交流】01月份微信图文索引
  3. bootstrap 评价页面_文章评论《 HTML5 与 Bootstrap 应用实例 》
  4. 一个简单的Spring的AOP例子(JAVA面向切面编程)
  5. javascript window和document
  6. 新5 年时间服务器从 0 到 200,一个创业公司的架构野蛮生长史头疼哈
  7. python eval()函数用法以及可能出现的问题
  8. 「 每日一练,快乐水题 」1791. 找出星型图的中心节点
  9. bzoj 2705: [SDOI2012]Longge的问题——欧拉定理
  10. C#基础_值类型引用类型(十一)
  11. python皮卡丘编程代码_再接再厉,用python编程13行代码解方程组(纯字符)
  12. Redis(零):背景
  13. 三菱数据移位指令_三菱plc移位指令用法详解
  14. 2010年11月8日,早会资料(日本的文化节)。
  15. java 根据类名示例化类_Java收集器类– 18个示例
  16. VS2013 启动时遇到空白窗口
  17. cmd后台运行exe_了解运行命令的原理,为QQ制作运行命令启动
  18. NVIDIA驱动安装
  19. java web运行网址_猫哥带你去战斗——Java Web开发——网页篇[0]——第一个网页,第一次访问...
  20. matlab模拟化学反应,Matlab环境下化学反应动力学的MonteCarlo模拟

热门文章

  1. 跨部门不配合工作_作为管理者,如何解决跨部门成员互不配合的情况?
  2. Spring Cloud实战小贴士:turbine如何聚合设置了context-path的hystrix数据
  3. 【Spring Cloud中文社区】正式启动
  4. Hadoop YARN:调度性能优化实践
  5. 论文浅尝 | 基于异质图交互模型进行篇章级事件抽取
  6. Failed to execute goal org.apache.maven.plugins:maven-resources-plugin
  7. 当知识图谱遇上推荐系统之PippleNet模型(论文笔记二)
  8. 《C#与.net高级编程》——第一支柱:C#的封装
  9. 1.15-1.16 sqoop action
  10. python的变量命名及其使用