This tutorial will teach you how to make a chart that updates in real time on the client side.

ASP.NET Updating Chart Controls in Real Time

The purpose of this tutorial will be to explain how to create an AJAX timer event and use it to update
a chart in real time on the Client Side. We will be generating data randomly and using it for our
table so that we can see it update.

Overview

1. Add Required References

2. Create a simple Chart in Code

3. Add an AJAX timer

4. Setup the Timer to add random points to our Chart

Add Required References

1. Open up the references tab in your Solution Explorer

2. Right click on References and Navigate to ->Add Reference

3. Click on the .NET tab and scroll Down the list to find System.Web.DataVisualization

4. Select OK and you are done adding the Required References

Create a Simple Chart in Code

1.Create a new web form and call it PayRoll.aspx

2.Open the PayRoll.aspx File and inside the and tags insert this code to create a Table

3. Now you have successfully Created a Simple Chart in code you can view the page to
verify the Chart although the Chart has no Data

Add an AJAX Timer
1. Go to the design view of your PayRoll.aspx Page and Drag and Drop a Timer onto the Form from the
AJAX section of the Toolbar

2. Right Click on the Timer Object and go to the Properties. Edit the Interval to be 1500 (1500ms = 1.5 seconds)

3. The AJAX Timer Requires that we have a ScriptManager Prior to using the Timer so we need to add that in.

4. Go to the code view and insert this code above your Timer Code

5. If Done Correctly your code should look like this

6. Now we need to add some simple code to the Timer function to allow it to add data to our Chart

Setup the Timer to Add Random Points to our Chart

1. Go back to the design view and double click on the Timer Object this will open up the Timer1_Tick Event Code Section

2. Add the following reference call to the top of your project

3. Add in the following Code to the Timer1_Tick Function to make the Timer insert our data every 1.5 seconds

4. We Can Now View Our Page and it should refresh itself every 1.5 seconds with a new entry on our line Chart.

Conclusion

This project allows us to try out some very versatile new functionality with Charts with only a few lines of Code. This new
feature allows us to insert/update Data on an interval basis from the Client’s side saving up bandwidth for other purposes.

Download Source Files