How do you create a graph using Visual Studio 2015 ASP.NET 4.5.2 Web Form template that continuously updates?

Question

I need to create a website which present a number of charts (preferably line graphs) which will actively (in real time) display data as it is being read from a sensor. I have successfully created active live charts in Windows Forms Application, however they do not let display my data on an internet website.

Therefore I have attempted to create a simple graph in an ASP.NET Application using a Web Forms ASP.NET 4.5.2 template. The Default.aspx.cs code was simple and as I was trying to plot a point on a graph every 500 ms whenever button 1 is pressed. However when I opened the application in my browser pressing button 1 caused the timer to activate, but the graph remained blank (flickered on the screen). Please can somebody help me create a chart that can actively update to display new data as it is captured/generated.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class _Default : Page
    {
        int i = 0;
        protected void Page_Load(object sender, EventArgs e)
        {
            Timer1.Interval = 1000;
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Timer1.Enabled = true;
        } 

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            this.Chart1.Series["Series1"].Points.AddXY(i, i);
            i++;
        }
    }
}

score 0 · Answer 1 · answered Feb 15 '17 at 15:54

0

Checkout Signal - https://www.asp.net/signalr. Your code above uses webforms. Although it's doable but I prefer you use newer framework like MVC for your front-end/web.

answered Feb 15 '17 at 15:54

alltej

6,787
10
46
87

the link you provided has helped me a lot. – Marco Soto Feb 22 '17 at 12:30

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

Your server side approach won't work in this case: You need to use either:

server pulling on client make ajax call to run multiple times with setInterval
or use web socket HTML5 web socket with ASP.NET

to get your latest data for the chart. That means you need to change you web-form a bit to expose web service that will provide you latest data and update UI to consume this via javascript.

edited May 23 '17 at 10:29

Community

1
1

answered Feb 15 '17 at 15:58

klashar

2,519
2
28
38

Thank you. This has helped a lot. – Marco Soto Feb 22 '17 at 12:29

How do you create a graph using Visual Studio 2015 ASP.NET 4.5.2 Web Form template that continuously updates?

2 Answers2