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 + "}");

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/489273.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

6G应用场景有哪些?首份6G报告给你揭晓

来源&#xff1a; 5G产业圈导 读中国移动研究院无线与终端技术研究所所长丁海煜介绍称&#xff0c;按照移动通信产业“使用一代、建设一代、研发一代”的发展节奏&#xff0c;业界预期6G将于2030年左右实现商用。“创新、协调、绿色、开放、共享”应成为5G向6G演进的新发展理念…

linux python 图形界面开发_python在linux制作图形界面(snack)

snack是一个用于在linux制作图形界面&#xff08;GUI&#xff09;的模块&#xff0c;该模块由c编写&#xff0c;而且redhat的系统都自带这个模块。 1.获取模块 虽然redhat系统会自带这个模块&#xff0c;但是直接去import snack会提示找不到模块&#xff0c;一个原因是我们重装…

虚拟搭建局域网模拟器_巧用虚拟局域网,快速搭建私有云,一步就能搞定

前段时间公司一直在使用局域网来进行文件共享&#xff0c;用一台电脑把某个文件夹在局域网里共享出来&#xff0c;其他电脑远程访问&#xff0c;但是这样使用太麻烦&#xff0c;要是主电脑忘记开机&#xff0c;其它人就用不了。再就是&#xff0c;一旦离开公司之后&#xff0c;…

云服务器cvm只能弄网站么,云服务器cvm与建站主机区别

因此&#xff0c;云服务器cvm与建站主机的区别&#xff0c;其实也就是云服务器与虚拟主机之间的区别。安全可靠性云服务器cvm基于新型的虚拟主机现也位于云技术平台&#xff0c;安全稳定性较强。不过&#xff0c;由于CPU、带宽或IP等资源与其他空间共享&#xff0c;性能方面还是…

5个层级带你看清一颗芯片的内部结构

来源&#xff1a;北京物联网智能技术应用协会导 读在我们阐明半导体芯片之前&#xff0c;我们先应该了解两点。其一半导体是什么&#xff0c;其二芯片是什么。

python使用shell命令_python 调用shell命令的方法

在python程序中调用shell命令&#xff0c;是件很酷且常用的事情…… 1. os.system(command) 此函数会启动子进程&#xff0c;在子进程中执行command&#xff0c;并返回command命令执行完毕后的退出状态&#xff0c;如果command有执行内容&#xff0c;会在标准输出显示。这实际上…

ActiveRecord模式整理

DAO Data Access Object&#xff0c;数据访问对象 DAO是一个软件设计的指导原则&#xff0c;在核心J2EE模式中是这样介绍DAO模式的&#xff1a;为了建立一个健壮的J2EE应用&#xff0c;应该将所有对数据源的访问操作抽象封装在一个公共API中。用程序设计的语言来说&#xff0c;…

java中必检异常有哪些_Java面试题经典面试题220道(附答案)

Java基础&#xff1a;1.JDK 和 JRE 有什么区别&#xff1f;2. 和 equals 的区别是什么&#xff1f; 解读3. 两个对象的 hashCode() 相同&#xff0c; 那么 equals() 也一定为 true吗&#xff1f;4. final 在 Java 中有什么作用&#xff1f;5. Java 中的 Math. round(-1. 5) 等…

11项关键先进制造技术解读!

来源&#xff1a;中国指挥与控制学会图片&#xff1a;来源于网络上届美国总统奥巴马非常重视制造业。其发起成立的“先进制造业合作委员会”&#xff0c;Advanced Manufacturing Partnership&#xff0c;就未来制造业的发展做出了展望&#xff0c;重点规划11个技术领域&#xf…

网站程序数据库怎么上传到服务器上,网站的数据库怎么上传到服务器

网站的数据库怎么上传到服务器 内容精选换一换通常在将数据导入数据库前&#xff0c;即将入库的数据已经在相关主机上了。我们称这种保存着待入库数据的服务器为数据服务器。此时&#xff0c;只需检测以确认数据服务器和GaussDB(for openGauss)集群能够正常通信&#xff0c;并查…

知道接口地址 如何传数据_数据不知道如何可视化?一款工具推荐给大家

之前我们介绍过 Python 里面的一些数据分析和可视化工具&#xff0c;比如 Pandas、Modin、Dash 等。今天要介绍一款标星 12.1K 的数据可视化工具 bokeh&#xff0c;优雅、简洁、高性能的交互式可视化库&#xff0c;同时支持大数据量和流式数据。其中 PyPI 和 Conda 每月安装超过…

(六)Spark-Eclipse开发环境WordCount-JavaPython版Spark

Spark-Eclipse开发环境WordCount 视频教程&#xff1a; 1、优酷 2、YouTube 安装eclipse 解压eclipse-jee-mars-2-win32-x86_64.zip JavaWordcount 解压spark-2.0.0-bin-hadoop2.6.tgz 创建 Java Project-->Spark 将spark-2.0.0-bin-hadoop2.6下的jars里面的jar全部复制到Sp…

c# 从一组数中随机抽取一定个数_Python随机模块22个函数详解

随机数可以用于数学&#xff0c;游戏&#xff0c;安全等领域中&#xff0c;还经常被嵌入到算法中&#xff0c;用以提高算法效率&#xff0c;并提高程序的安全性。平时数据分析各种分布的数据构造也会用到。random模块&#xff0c;用于生成伪随机数&#xff0c;之所以称之为伪随…

读书人:人机融合中的深度态势感知

雅典学院&#xff08;拉斐尔&#xff09;来源&#xff1a;人机与认知实验室“你现在的气质里&#xff0c;藏着你走过的路&#xff0c;读过的书和爱过的人。"— 电影《卡萨布兰卡》里的一句话《追问人工智能》--刘伟 - 读书人视频如下&#xff1a;https://www.bilibili.com…

python时间序列进行线性插值_Python pandas时间序列插值日期时间数据

这似乎有效.可能有点清理代码.但是你得到了它的要点 from datetime import datetime import pandas as pd import time #Create data df pd.DataFrame({ interval : [0.782296, 0.795469, 0.821426, 0.834957, 0.864383, 0.906240], datetime : [datetime(2012, 11, 19, 12, 4…

根据id 隐藏_明星ID价值四位数?吃鸡玩家崩溃:打工一个月工资还没名称值钱...

01你知道吗&#xff1f;和平精英游戏名称也很值钱&#xff1f;——最近&#xff0c;有这样一条消息出现在了我的面前&#xff0c;某和平精英角色明星名称的价格居然被捧到了千元之上&#xff0c;对&#xff0c;各位没有看错&#xff0c;虽然只是一个普普通通的游戏名称&#xf…

范式变革与规律涌现:世界科技发展新趋势

来源&#xff1a;学习时报新科技革命与产业变革持续展开&#xff0c;以人工智能为代表的新兴使能技术驶入“快车道”&#xff0c;世界科技创新被认为正在进入“认知革命”的阶段——对生命过程的“精微刻画与操作”和对人类智能的“逆向工程与强化”。趋势特征从“大停滞”迈向…

Unity5和WebGL移植指南的一些总结

对于手游开发者来说&#xff0c;更新版本往往意味着非常复杂的过程&#xff0c;你需要根据反馈做更新、测试、提交然后等待审核&#xff0c;而由于不需要客户端依赖&#xff0c;页游往往是快速测试游戏版本的最佳途径&#xff0c;很多人可能都知道Unity 5可以再不用Unity Web P…

java indexof方法_【3-14】Java中集合类list的增删改查

Hello&#xff0c;大家好&#xff0c;我是大家最亲爱的siki老师&#xff0c;每天都会在这里为大家带来一个Java语法中有趣的知识点&#xff0c;Q群175158287&#xff0c;欢迎同大家多多交流哈&#xff01;今天给大家带来的是Java中list类的使用&#xff0c;java.util 包提供了l…

清华大学孙富春教授:基于知识智能的机器人技能学习

来源&#xff1a;学术通在刚结束的2019中国人工智能产业年会分论坛——“知识智能及其产业应用论坛”上&#xff0c;清华大学计算机科学与技术系教授、中国人工智能学会副理事长、国家杰青孙富春教授发表了题为《基于知识智能的机器人技能学习》的报告。孙富春教授报告聚焦人工…