结合JQuery Flot组件的工业动态数据Web监控

最新推荐文章于 2023-03-31 16:20:43 发布

yanqlv

最新推荐文章于 2023-03-31 16:20:43 发布

阅读量5.3k

点赞数

分类专栏： .Net学习中文章标签： jquery web textbox javascript function webservice

本文链接：https://blog.csdn.net/yanqlv/article/details/5039067

版权

.Net学习中专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Flot组件是Google Code上一个基于JQuery的图形组件，

http://code.google.com/p/flot/

基于这个组件，用ASP.NET以AJAX方式通讯，实现了工业实时动态数据Web图像的显示。

原理就是参照Flot组件例子中的ajax.html，在后台的ashx代码里，将实时数据组合为JSON格式，通过ajax方式发送给Flot组件，

以实现了动态的效果。测试表明，对性能的要求不高，而且客户端不需要任何组件，这是比SVG和Flash/Flex等方式优越的地方。

关键代码如下（效果是一秒钟数据变化一下，测试代码中是随机数，可以改成监控实时数据）：

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> <%@ Register assembly="System.Web.Entity, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" namespace="System.Web.UI.WebControls" tagprefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title>  <mce:script language="javascript" type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script language="javascript" type="text/javascript" src="jquery.flot.js" mce_src="jquery.flot.js"></mce:script> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="Button3" runat="server" style="margin-left: 69px" mce_style="margin-left: 69px" Text="GetValue" /> <input type="button" id="AjaxButton" value="AjaxButton"/> </div> <asp:Panel ID="Panel1" runat="server" style="margin-bottom: 214px" mce_style="margin-bottom: 214px"> <asp:TextBox ID="TextBox1" runat="server" ontextchanged="TextBox1_TextChanged" Width="343px"></asp:TextBox> </asp:Panel> </form> <div id="placeholder" style="width:600px;height:300px;"></div> <mce:script id="source" language="javascript" type="text/javascript"></mce:script> </body> </html>

Handler1.ashx.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO; using System.Text; using System.ServiceModel.Web; using System.Runtime.Serialization; using System.Runtime.Serialization.Json; using System.Diagnostics; namespace WebApplication1 { /// <summary> /// Summary description for $codebehindclassname$ /// </summary> // [WebService(Namespace = "http://tempuri.org/")] // [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class Handler1 : IHttpHandler { public const int MAXLEN = 30; public static double[] timeseries ; public void ProcessRequest(HttpContext context) { //context.Response.ContentType = "text/plain"; context.Response.ContentType = "application/json"; context.Response.Charset = "utf-8"; DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(MonitoringData)); var dataseries1 = new MonitoringData(); Random r1=new Random(); if (timeseries == null) timeseries = new double[MAXLEN]; //double pt_value = Class1.AgilorGetPointValue("ESChannel.OilDevice.PI109".ToCharArray()); //timeseries[MAXLEN - 1] = pt_value; timeseries[MAXLEN - 1] = r1.next(1,10); //TEST only! for( int i=0; i<MAXLEN-1; i++) { timeseries[i]=timeseries[i+1]; } string data1 = "["; for (int i = 0; i < MAXLEN; i++) { //var timevalue1=new TimeValue(); //timevalue1.time=i; //timevalue1.value=r1.Next(1,MAXLEN); //data1 += "[" + i.ToString() + "," + r1.Next(1, datalen).ToString() + "]"; data1 += "[" + i.ToString() + "," + timeseries[i].ToString() + "]"; if (i != MAXLEN - 1) data1 += ","; //最后一个数据不加"," } data1 += "]"; dataseries1.data = data1; dataseries1.label = "PI109"; //dataseries1.data= / print the JSON string for validation //var stream=new MemoryStream(); //serializer.WriteObject(stream, dataseries1); //byte[] dataBytes = new byte[stream.Length]; //stream.Position = 0; //stream.Read(dataBytes, 0, (int)stream.Length); //string dataString = Encoding.UTF8.GetString(dataBytes); string dataString = "{ label:'" + dataseries1.label + "',data:" + dataseries1.data + "}"; Trace.WriteLine("JSON string is:"); Trace.WriteLine(dataString); //string teststr="{ 'label': 'Europe (EU27)', 'data': [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1]] }"; context.Response.Write(dataString); } public bool IsReusable { get { return false; } } } }

yanqlv

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
结合JQuery Flot组件的工业动态数据Web监控

Flot组件是Google Code上一个基于JQuery的图形组件，http://code.google.com/p/flot/ 基于这个组件，用ASP.NET以AJAX方式通讯，实现了工业实时动态数据Web图像的显示。原理就是参照Flot组件例子中的ajax.html，在后台的ashx代码里，将实时数据组合为JSON格式，通过ajax方式发送给Flot组件，以实现了动
复制链接

扫一扫