Click here to Skip to main content
13,862,914 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


71 bookmarked
Posted 18 Dec 2008
Licenced Ms-PL

ASP.NET Charting Controls

, 25 Jan 2013
Rate this:
Please Sign up or sign in to vote.
Usage of ASP.NET Charting Controls provided with .NET Framework 3.5 SP1


The article provides a brief idea about how to use the ASP.NET charting controls and create beautiful graphs. I want to share my experience with some of you who are interested in working on Microsoft technologies.


We may use various graphs or graphical controls developed by various organizations. We can even develop our own graphs by using System.Drawing namespace provided by the .NET Framework. Some people may use Google charts which we can get by simple httprequests. The Microsoft community has developed graphs which are pretty much interesting and have a good and rich look.


Following are the prerequisites for using the ASP.NET charting controls:

  1. Install .NET Framework 3.5 (SP1 if possible). 

  2. Install Visual Studio 2008 (SP1 if possible). 

  3. Download the charts and Visual Studio add-in from the below links.

  4. You can also download the samples and documentation from the below links:

    You can install the charts by double clicking on MSChart.exe and add-in by double clicking on MSChart_VisualStudioAddOn.exe.

  5. After installation, create a web project/ Website in Visual Studio 2008.

  6. Drag the charting control which is available under the data section of Toolbox.

Using the Chart Control

We have to create  an <asp:chart /> tag to place the control. It has various properties links, height, width, shading, backcolor, and bordercolor.

<asp:chart id="Chart1" runat="server" Height="296px" Width="412px"
      BorderDashStyle="Solid" BackSecondaryColor="White"
      BackGradientStyle="TopBottom" BorderWidth="2px" backcolor="211, 223, 240"
      BorderColor="#1A3B69" >

<titles .> tag is used to place the titles on the graph. We can create a title using <asp:Title /> tag. The title created here will be placed above the chart.

      <asp:Title Text="Title of the Graph comes here" />

Series is a tag used to add the columns or to plot the points on the graphs. We can add series by using <Asp:series />. We can add the name of the series that is plotted and also the points by using <points />. We can add the data points using <asp:DataPoint />.

In the <asp:datapoint> tag, axislabel is used to add the name to the label and xvalue and Yvalue to plot the point on the graph.

          <asp:Series Name="Students" BorderColor="180, 26, 59, 105">
               <asp:DataPoint AxisLabel="jon" XValue="5" YValues="4" />
               <asp:DataPoint AxisLabel="kon" XValue="15" YValues="44" />
               <asp:DataPoint AxisLabel="pol" XValue="85" YValues="90" />
          <asp:Series   Name="Teachers" BorderColor="180, 26, 59, 105">
               <asp:DataPoint AxisLabel="hjim" XValue="50" YValues="40" />
               <asp:DataPoint AxisLabel="azdai" XValue="75" YValues="4" />
               <asp:DataPoint AxisLabel="kriasm" XValue="35" YValues="29" />

Finally, we need to create a chart area where the actual graph is displayed. We can create gridlines on Xaxis and Yaxis if required and can add styles to the chart area as below:

        <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64"
 BorderDashStyle="Solid" BackSecondaryColor="White"
 BackColor="64, 165, 191, 228"
 ShadowColor="Transparent" BackGradientStyle="TopBottom">
            <area3dstyle Rotation="10" perspective="10" Inclination="15"
 IsRightAngleAxes="False" wallwidth="0" IsClustered="False"></area3dstyle>
            <axisy linecolor="64, 64, 64, 64">
                <labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />
                <majorgrid linecolor="64, 64, 64, 64" />
            <axisx linecolor="64, 64, 64, 64">
                <labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />
                <majorgrid linecolor="64, 64, 64, 64" />

The above graph is created when all the above code is executed.

Points of Interest  

We can create graphs simply by adding the datapoints. The graphs can also be created dynamically by providing the datasource to the asp:chart control which I will provide to you later.


  1. New ASP.NET Charting Control: <asp:chart runat="server"/>
  2. Charting Controls


  • 18th 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 Imaginnovate TechSolutions
India India
Spends free time, working with new stuff from Microsoft and Web technologies. Recently started working on "Ruby on Rails" and other open source technologies.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Mahesh Sanika29-Jan-13 22:16
memberMahesh Sanika29-Jan-13 22:16 
Generalchart controls with options... Pin
varaprasadreddy.bh19-Dec-12 9:25
membervaraprasadreddy.bh19-Dec-12 9:25 
GeneralMy vote of 1 Pin
Dhruv.SoluSoft30-Jul-09 5:42
memberDhruv.SoluSoft30-Jul-09 5:42 
GeneralRe: My vote of 1 Pin
Ryan Minor25-Jan-13 16:20
memberRyan Minor25-Jan-13 16:20 
QuestionDoes the Control Bind to DataSourceControls? Pin
Mark Henke23-Dec-08 11:47
memberMark Henke23-Dec-08 11:47 
AnswerRe: Does the Control Bind to DataSourceControls? Pin
Madhukar Mudunuru28-Dec-08 20:44
memberMadhukar Mudunuru28-Dec-08 20:44 
GeneralRe: Does the Control Bind to DataSourceControls? Pin
Member 1028330226-Jul-18 11:03
memberMember 1028330226-Jul-18 11:03 
GeneralCool Pin
Abhijit Jana18-Dec-08 3:50
mentorAbhijit Jana18-Dec-08 3:50 
GeneralRe: Cool Pin
Madhukar Mudunuru18-Dec-08 23:36
memberMadhukar Mudunuru18-Dec-08 23:36 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190214.1 | Last Updated 25 Jan 2013
Article Copyright 2008 by Madhukar Mudunuru
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid