ajax实现重新绘图,如何画Flot AJAX更新图
在上一章我们提到了如何画实时更新图,而这一章就要教你们如何利用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更新图相关推荐
- flot.js ajax,如何画Flot实时更新图
实时更新图表可以用到的地方有很多,如CPU负载图.内存用量图或是像在线人数图等,在这我们会用CPU负载图做为范例. CPU负载实时更新图 所需要的档案 所有的档案都需加到 里, 因为我们有用到时间格式 ...
- 拜师————python基础入门——守破离学习法,海龟绘图,画出奥运五环图,day3
第六节课:任务6:006.简单错误如何处理_守破离学习法_程序员修炼手册 刚刚开始学习python,编程常常会出现一系列错误,建议采用一种学习方法来学习: 守 破 离 (这个是学习常识) 老师出的书: ...
- python_海龟绘图_画出奥运五环图---python工作笔记014
然后我们再用海龟绘图去,画个奥运五环 去新建一个文件 首先引入turtle海龟绘图程序包
- 20200929 008.海龟绘图_画出奥运五环图
绘制奥运五环标记 源码: #绘制奥运五环 import turtle turtle.width(10) turtle.color("blue") turtle.circle(50) ...
- FlexChart: 针对AJAX的Flash绘图应用
FlexChart: 针对AJAX的Flash绘图应用 作者 Jon Rose 译者 崔康 FlexChart是一款开源的Flash应用,用在AJAX程序中.该绘图应用是通过XML动态驱动的.Ba ...
- Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生
最近开始学习Asp.net中的AJAX,可能我的高手朋友们会说:"走还不稳呢!怎么就想学跑了?"呵呵!主要是我在做项目中体会到AJAX真的是很好的一门技术,应该好好的学习一下, ...
- jquery ajax 与 flask 传输 json 并且 提取ajax数据作为全局变量
jquery ajax 与 flask 传输 json 并且 提取ajax数据作为全局变量 jquery <!DOCTYPE html> <html lang="en&qu ...
- [转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]
转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...
- java绘图机器猫_用绘图语句画机器猫(初学 C 语言的同学必看)
学编程最需要注意的就是多动手,多练习.不管你学了多少,学一点,就要练习一点.哪怕没有学习循环和判断,都可以写出一些不错的程序来. 所以,我写了这个范例程序给大家参考.希望可以抛砖引玉,给初学 C 语言 ...
最新文章
- python post json数据_Python POST Json数据到Http
- greenplum安装札记(待完善)
- 在 Ubuntu 上安装 Android Studio
- PowerDesigner将PDM导出生成WORD文档(转)
- 数据的gzip压缩解压缩_使用GZIP和压缩数据
- 利用logminer恢复delete误删除操作的数据
- 去大厂也就图一乐,真人上人还得是外包
- RHEL7升级自带Git
- Android 功耗(18)---android省电和提高效率
- Oracle优化问题
- java安卓版_Java虚拟机安卓版下载
- mysql用户和权限管理总结_【转】mysql 用户及权限管理 小结
- 联通光猫创维DT741-csf如何获取超级账户
- ubuntu离线中文语音识别
- 计算机垃圾清理指令,win7电脑清理垃圾的运行命令代码是什么
- Java--基于Java编写的数据库加解密工具包(附)GitHub源码
- strongswan与sangfor的ikev2配置
- 华为云获TFC“年度最佳云服务商”金苹果奖
- H264解码器源码(vc6版)H264Decoder_vc6.rar
- Win8.1RTM Pro电话激活
热门文章
- oracle 02085,OracleDBLink创建和维护以及ORA-02085解决办法
- IDEA连接mysql出现时区错误_idea连接数据库时区错误
- python读取Excel实例详细教程
- HTML+CSS+JS面试题(附带答案)
- java 类的高级特性_java程序-类的高级特性
- 机器人编程与python语言的区别_一分钟看懂“机器人编程”和“少儿编程”的区别!...
- Spring Cloud Config采用数据库存储配置内容【Edgware+】
- 强化学习在美团“猜你喜欢”的实践
- 牛逼!支付宝高级Java三面题目:线程锁+事务+雪崩+Docker等
- 中文幽默语料库构建与计算项目(幽默等级识别,幽默类型识别,隐喻类型识别,隐喻情绪识别)