Advanced Microsoft Chart Control for .NET Framework 3.5


In my last article we covered many of the basics for using and configuring the Microsoft Chart Control for the .NET Framework 3.5. Similar to the previous article, we will primarily focus on ASP.NET functionality of the Chart Control. For this ASP.NET tutorial we will dive into the AJAX capabilities of the Chart control including real-time data and interactivity.

For many applications real-time data is a requirement and as such it tends to be very complicated. Especially when it comes to real-time charting. The Microsoft Chart Control actually makes the process of real-time charting very easy. To begin with real-time data/charting we first need to create a new AJAX enabled Web application. Within the default.aspx page, we need to add the ScriptManager control as well as an UpdatePanel. Within the UpdatePanel we need to first add an AJAX Timer as well as the Chart control itself as shown below.

Figure 1 - Initial Setup

If you are not familar with the purpose of the AJAX Timer you may be wondering what the timer provides. The answer is simple, in order to provide real-time data updates to the display inside an UpdatePanel we need a trigger to refresh it at a given interval. At the interval specified, the timer will fire a Tick event which we will use to incrementally populate the Chart. Generally speaking, you should minimize the use of the Timer as the shorter the Timer interval is, the more load on the web server. When you do use it, I recommend minimizing the number of controls in the UpdatePanel.

Out of the box, the Chart control is setup for a single Chart Area with a single series and for real-time data that is sufficient for what we need. However, when I think of real-time data with regard to a chart it is usually a strip chart or spline chart such as those used for stocks or monitoring value changes over time. Edit the Series using the Series property on the Chart. Switch the Type from Column to Spline which will provide a smooth line representing the data.

Next, we will make the changes necessary to the Timer. In the Timer properties, set the Interval to 1000 which will cause the Timer to fire the Tick event once every 1000ms or 1 second. Next create the handler for the Timer Tick event with the following code block:

protected void Timer1_Tick(object sender, EventArgs e)
   Series s = Chart1.Series["Series1"];
   //Determine the next X value
   double nextX = 1;

   if (s.Points.Count > 0)
      nextX = s.Points[s.Points.Count-1].XValue+1;

   //Add a new value to the Series
   Random rnd = new Random();
   s.Points.AddXY(nextX,(rnd.NextDouble() * 10)-5);

   //Remove Points on the left side after 100
   while (s.Points.Count > 100)

   //Set the Minimum and Maximum values for the X Axis on the Chart
   double min = s.Points[0].XValue;
   Chart1.ChartAreas[0].AxisX.Minimum = min;
   Chart1.ChartAreas[0].AxisX.Maximum = min + 100;

At a high--this code performs the following functions:

  1. Grabs a reference to Series1
  2. Determines the next value to use for the X value, either 1 or the previous value +1
  3. Adds a point to the Series using the X value determined previously and a Random Value for Y. The math for the Random Value is designed to provide a random number between -5 and +5.
  4. If the points within the Series are greather than 100 remove the points starting at position 0. The purpose for this code is to limit the number of points within the series and remove from the left side as needed. The effect of this is to provide a chart which appears to scroll to the left with the most up to date values on the right.
  5. Finally, set the minimum and maximum values for the X Axis on the Chart.

The overall effect of this code is to add one random value to the right side of the chart and provide the effect of scrolling to the left. At this point, if you were to run the project you will notice that the Chart doesn't actually display the data correctly. The reason for this is that the Chart is only storing the most recent value added to the Series. While you can either populate the entire series with data as you would do with data binding to a database. In our case we are incrementally populating the Series one value at a time. The simple solution is to enable ViewState on the Chart control. Yes by default, the Chart control does not have ViewState enabled.

After enabling ViewState and running the project, allow it to run for a bit and you should see an image similar to Figure 2 below.

Figure 2 - Sample Run

Advanced Microsoft Chart Control for .NET Framework 3.5

Interactive Capabilities

When I think of interacting with a chart a couple different scenerios come to mind including drill down, highlight point, etc. In order to do the various types of interactivity, we need to know where the user clicks on the Chart. Specifically when the user clicks on the Chart we need the series and the point they clicked on. If you take a look at the events for the Chart control you will notice that logically the main event is on Click. If you explore the event further you will notice that it does not appear to provide sufficient information to determine what series and/or point the user clicked on. The second event parameter, of type ImageMapEventArgs, is where you expect to see the series and point only contains a PostBackValue property.

What this means is that in order to determine the information we need, the data must be encoded. The Series provides a property named PostBackValue which allows the exact encoding we need. If we were to set the PostBackValue of the series to this value #SERIESNAME;#INDEX the Chart control will populate the PostBackValue on the Click event with the correct series name and the index of the item clicked upon. #SERIESNAME and #INDEX are known as key words and they are used in various Chart control properties to provide automatic encoding of data for PostBackValues, Tool Tip Values, etc. Below is a list of common keywords and their uses:

  • SERIESNAME - Series Name
  • #INDEX - Index of the X value
  • #VAL - Y value
  • #VALX - X value
  • #TOTAL - Total of the Y values selected
  • #MIN - Minimum Y value selected
  • #MAX - Maximum Y value selected
  • #AVG - Average of the Y values selected

For a complete list of the keywords please refer to the MSDN page on the Chart Control keywords.Back to the Click event and the encoding of the series name and index. If we use the following code in the Click event we are able to easily decode the PostBackValue and perform operations based upon this information.

protected void Chart1_Click(object sender, ImageMapEventArgs e)
   //Split apart the values from the postback
   string[] parts = e.PostBackValue.Split(';');

   //Get the value at the chosen index
   double y = Chart1.Series[parts[0]].Points[int.Parse(parts[1])].YValues[0];
   Label1.Text = string.Format("Series: {0} Selected Value: {1}", parts[0], y);

This click event handler, first splits the PostBackValue by the semicolon to give us the series name and the index of the value chosen. The second part accesses the series and pulls the Y value at the given index. In this example, I use a label to display the series name and value and the given index. However, you could just as well use this information to populate a detail table or a secondary chart.


Above we covered some of the Microsoft Chart control's AJAX integration as well as real-time data, interactivity and data formatting. As you can see, the Chart control makes the process of providing complex charting within your ASP.NET application a breeze. While the control provides many more features, we can start to see the real power of this control.

This article was originally published on May 24th, 2010

About the Author

Chris Bennett

Chris Bennett is a Manager with Crowe Horwath LLP in the Indianapolis office. He can be reached at chris.bennett@crowehorwath.com.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date