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. 

For a More Basic Overview of Charts in ASP.NET 4.0 go Here
 
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



We are using Server Intellect and have found that by far, they are the most friendly,
responsive, and knowledgeable support team we've ever dealt with!
 
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

 
  
 
    
 
	
<asp:Chart ID="chtCategoriesProductCount" runat="server" Width="550px" 
        Height="350px" EnableViewState="true"> 
<Series> 
      <asp:Series Name="Categories" ChartType="Line" Palette="Chocolate" 
           ChartArea="MainChartArea"></asp:Series> 
</Series>
  <ChartAreas> 
    <asp:ChartArea Name="MainChartArea">
      </asp:ChartArea> 
      </ChartAreas> 
    </asp:Chart>

    
 
  
 


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

We chose Server Intellect for its dedicated servers,for our web hosting.
They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

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

 
  
 
    
 
	<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>

    
 
  
 


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
 
  
 
    
 
	using System.Web.UI.DataVisualization;
    
 
  
 

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

 
  
 
    
 
	//every pass through this function will insert a random Y value at the next X value for our Line Chart
	//used for generating a random number
	Random rnd = new Random();
	//this will add a random number to the chart everytime the Timer1_Tick event is triggered
	chtCategoriesProductCount.Series["Categories"].Points.AddXY(x,rnd.Next(5,20));
	//this is used so that we don’t overwrite the data that we made in the prior run
	x++;

    
 
  
 

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. 
 

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several,
we went with Server Intellect and have been very happy. They are the most professional,
customer service friendly and technically knowledgeable host we've found so far.