Click here to Skip to main content
Click here to Skip to main content

ASP.NET Dynamic Charting Controls

, 29 Dec 2008 Ms-PL
Rate this:
Please Sign up or sign in to vote.
Usage of ASP.NET Charting Controls provided with .NET Framework 3.5 SP1


This illustrates how to build dynamic charts on the web using the ASP.NET chart controls. The earlier article provides you with an outline of the ASP.NET chart control. In my earlier article, the points are binded statically as shown below:

    <asp:DataPoint AxisLabel="jon" XValue="5" YValues="4" />
    <asp:DataPoint AxisLabel="kon" XValue="15" YValues="44" />
    <asp:DataPoint AxisLabel="pol" XValue="85" YValues="90" />

But no one is really interested in static charts. Graphs should be generated dynamically from datasources like Collection objects, datasources, etc.


This article is the continuation of the below article:

Generating Dynamic Charts

This article mainly focuses on the dynamism of the charts, i.e adding the titles, series and datapoints dynamically. There are various ways we can generate the graphs dynamically but I could only present two methods.

Adding Titles

We can add the title in the below manner. Here Chart1 is the chart object id. By using the method Titles.Add() we can add the title to the chart.

Chart1.Titles.Add("Pass percentage of Students")

Adding Series

Similar to titles, we can also add the series label by Series.Add() method. Here Pass percentage is the legend of the series.

Chart1.Series.Add("Pass percentage") 

Add Points and Axis Label

Finally we need to add the points to the series. Here the Series(0) indicate the first series.

There are two methods to add the points:

  1. By using AddXY, Add, AddY overloading methods
  2. By using the DataBindXY overloading method

Method 1

Points.AddXY method is used to add the X and Y points to the chart. We can also add the axis label by assigning the labels to Points.Item(j).AxisLabel property. Here Item(j) indicates the Jth point.

Dim Yr As Int16 = 2000 
Dim j As Int16 = 0
For i As Integer = 1 To 9
    Chart1.Series(0).Points.AddXY(i + 10, i + 15)
    Chart1.Series(0).Points.Item(j).AxisLabel = Yr
    Yr = Yr + 1
    j = j + 1

Method 2

By using the DataBindXY method, we can directly bind the X,Y coordinates or even overload method is available for X, Y and Label:

 Dim xval As String() = {"Peter", "Andrew", "Julie", "Mary", "Dave"}
 Dim yval As Double() = {2, 6, 4, 5, 3} 
 Chart2.Series(0).Points.DataBindXY(xval, yval)

Here DataBindXY has two overload methods:

  1. Takes X Axis, Y Axis
  2. Takes X Axis, X Field, Y Axis

In the above manner, we add the points to the charts. We can improve the interface by changing the properties of the control.


  • 29th December, 2008: Initial post


This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


About the Author

Madhukar Mudunuru
Technical Lead Broadridge
India India
Myself working for Broadridge Financial Solutions. Spends free time, working with new stuff from Microsoft and Web technologies.
Follow on   Twitter   LinkedIn

Comments and Discussions

GeneralMy vote of 1 PinmemberPuchko Vasili29-Dec-08 19:10 
GeneralRe: My vote of 1 PinmemberMadhukar Mudunuru9-Jan-09 0:31 
GeneralMy vote of 1 PinmemberHelmar Dahmer29-Dec-08 12:27 
GeneralRe: My vote of 1 PinmemberMadhukar Mudunuru29-Dec-08 19:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150327.1 | Last Updated 29 Dec 2008
Article Copyright 2008 by Madhukar Mudunuru
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid