Click here to Skip to main content
11,412,516 members (70,857 online)
Click here to Skip to main content

ASP.NET 4.0 Chart Control

, 28 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
A short introduction into the new ASP.NET 4.0 Charts Control

NEW: View a live demo of the above charts tester code at

Charts Tester

Today, I would like to introduce the new Chart Control, which was newly added to the ASP.NET 4.0 Framework. With this chart control, you can build exciting graphical charts within minutes.

Our starting position is a new ASP.NET Web Application using Visual Studio 2010.

Implement the Control Into Your Page

If you open up your default.aspx and look at the toolbox, you will find the "Chart" Control in the section "Data":

If you drag the chart control into the design-surface, Visual Studio adds some settings to the web.config. This will be done automatically so the following is just an explanation of the changes:

Web.config Changes

ChartImage Settings

At the node <appSettings>, the following entry will be created:

<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />

This is the configuration of the temporary storage, where the generated files should be placed at. Please be aware of the fact that the storage will use a large amount of space, depending on how many charts will be generated.

ChartImage.axd Handler

At <system.web><httpHandlers>, the following entry will be added:

<add path="ChartImg.axd" verb="GET,HEAD,POST" 
System.Web.DataVisualization, Version=, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35" validate="false" />

The chartimage.axd is the main-component of the chart-control. The handler will be called for each generated image.


In the node <system.web><pages><controls>, the tag-definition will be added:

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" 

assembly="System.Web.DataVisualization, Version=, Culture:neutral, 
PublicKeyToken=31bf3856ad364e35" />

This will add the tag-support, that we can use a <asp:chart /> tag in our aspx pages.

Reference to the DataVisualization Assembly

At the end, a reference to the DataVisualization assembly will be added at <system.web><compilation><assemblies>:

<add assembly="System.Web.DataVisualization, Version=, 
Culture:neutral, PublicKeyToken=31bf3856ad364e35"/>

Default Chart-element in aspx Page

In the aspx page, where you dragged the control in, Visual Studio will add the default chart-control to the code:

<asp:Chart ID="Chart1" runat="server">

		<asp:Series Name="Series1">
		<asp:ChartArea Name="ChartArea1">


Charting Quickstart

Before we begin using the chart control, I would like to explain the properties "Series" and "ChartAreas":


The Series collection contains the data-points for one or more data-series. Basically for each line in the chart (consisting of multiple data-points), one series of data is required.
Each series can have its own ChartType. Additionally, each series can be assigned to any ChartArea where each series can also have its own rendering-properties (for example colors, labels, etc.).

ChartAreas The ChartArea collection can have one or more configurations which controls the rendering of a chart.
Important: There must be at least one ChartArea definition that the rendering will be executed!

Now we know that we have to add a <asp:Series> in the property <series> which contains our datapoints. Also we have to be sure that there is at least one <asp:ChartArea> at the <ChartAreas> defined, otherwise we would get just a white picture.

After changing the chart-control code to the following:

<asp:Chart ID="cTestChart" runat="server">
		<asp:Series Name="Testing" YValueType="Int32">

				<asp:DataPoint AxisLabel="Test 1" YValues="10" />
				<asp:DataPoint AxisLabel="Test 2" YValues="20" />

				<asp:DataPoint AxisLabel="Test 3" YValues="30" />
				<asp:DataPoint AxisLabel="Test 4" YValues="40" />

		<asp:ChartArea Name="ChartArea1">


We will get this output in the rendered output page:

So we successfully created our first chart!

More Information

The chart control in the ASP.NET 4.0 Framework is a big and comprehensive control, so to explain the whole control would be too much for a short blog-post Smile | :)

Also, there are already many good introductions and tutorials about the chart control, so I will give you a short list on what you can look at next:

So I hope I was able to give you a short overview about the new ASP.NET Charts Control! If you have any questions or information, please just leave a comment! I'm happy to read any suggestions and I will try to answer every question!

Now, have a nice day and always happy coding! Smile | :)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Christoph Keller
Software Developer
Switzerland Switzerland
I'm a software developer with ASP.NET experience since 2007

See my projects list here:

More about me:
My Blog:

Comments and Discussions

QuestionContinuation of the previous question Pin
shkhan at 8-Apr-15 10:14
membershkhan8-Apr-15 10:14 
QuestionNice one, thanks, but have a question! Pin
shkhan at 8-Apr-15 10:04
membershkhan8-Apr-15 10:04 
Generalthanxxxxx Pin
Nabil Mosali at 7-Dec-14 18:56
memberNabil Mosali7-Dec-14 18:56 
GeneralRe: thanxxxxx Pin
Christoph Keller at 7-Dec-14 21:06
memberChristoph Keller7-Dec-14 21:06 
QuestionGreat tutorial! Pin
Member 10606979 at 18-Feb-14 11:28
memberMember 1060697918-Feb-14 11:28 
AnswerRe: Great tutorial! Pin
Christoph Keller at 23-Feb-14 2:06
memberChristoph Keller23-Feb-14 2:06 
Questionchart in 4.0 is not shown after route Pin
idoyohanan at 22-Sep-13 11:28
memberidoyohanan22-Sep-13 11:28 
QuestionAbout chart control Pin
chenna.chinnabayanna at 20-Mar-13 0:02
memberchenna.chinnabayanna20-Mar-13 0:02 
Hi sir plz help me

I Have one linkbutton and one dropdown with 4 checkboxes
4)pie These 4 are checkboxes placed in dropdownlist

N linkbuttons are there
each linkbutton specify for one clients

what my question is if i click the linkbuton of perticular client and if i click checkbox of Area i should get only one chart i.e is Area chart
if i click two checkboxes like Area and pie i should get two charts
if i click 3 checkboxes i should get 3 charts
if i click 4 checkboxes i should get 4 charts related to them

plz reply for it as early as possible
QuestionHow to display dots on the chart? Pin
Wu John at 1-Mar-13 16:43
memberWu John1-Mar-13 16:43 
AnswerRe: How to display dots on the chart? Pin
Christoph Keller at 6-Mar-13 4:38
memberChristoph Keller6-Mar-13 4:38 
GeneralRe: How to display dots on the chart? Pin
Wu John at 7-Mar-13 2:09
memberWu John7-Mar-13 2:09 
QuestionClient Rendered Version? Pin
essence at 6-Feb-13 12:27
memberessence6-Feb-13 12:27 
AnswerRe: Client Rendered Version? Pin
Christoph Keller at 6-Feb-13 22:41
memberChristoph Keller6-Feb-13 22:41 
GeneralRe: Client Rendered Version? Pin
essence at 7-Feb-13 9:44
memberessence7-Feb-13 9:44 
Questionchart controls with options... Pin at 19-Dec-12 9:26
membervaraprasadreddy.bh19-Dec-12 9:26 
Questionhaving problem in pie chart drop out Pin
sharda jaiswal at 30-Oct-12 22:33
membersharda jaiswal30-Oct-12 22:33 
AnswerRe: having problem in pie chart drop out Pin
Christoph Keller at 31-Oct-12 6:28
memberChristoph Keller31-Oct-12 6:28 
GeneralRe: having problem in pie chart drop out Pin
sharda jaiswal at 31-Oct-12 22:52
membersharda jaiswal31-Oct-12 22:52 
GeneralRe: having problem in pie chart drop out Pin
sharda jaiswal at 1-Nov-12 3:08
membersharda jaiswal1-Nov-12 3:08 
GeneralRe: having problem in pie chart drop out Pin
Christoph Keller at 4-Nov-12 21:44
memberChristoph Keller4-Nov-12 21:44 
GeneralRe: having problem in pie chart drop out Pin
sharda jaiswal at 6-Nov-12 19:39
membersharda jaiswal6-Nov-12 19:39 
GeneralMy vote of 3 Pin
sharda jaiswal at 19-Oct-12 22:51
membersharda jaiswal19-Oct-12 22:51 
GeneralRe: My vote of 3 Pin
Christoph Keller at 21-Oct-12 4:41
memberChristoph Keller21-Oct-12 4:41 
GeneralMy vote of 5 Pin
D-Kishore at 4-Sep-12 2:05
memberD-Kishore4-Sep-12 2:05 
GeneralRe: My vote of 5 Pin
Christoph Keller at 4-Sep-12 6:45
memberChristoph Keller4-Sep-12 6:45 
QuestionGreat! (my vote of 5) Pin
Member 3812793 at 15-Mar-12 14:52
memberMember 381279315-Mar-12 14:52 
AnswerRe: Great! (my vote of 5) Pin
Christoph Keller at 15-Mar-12 20:59
memberChristoph Keller15-Mar-12 20:59 
GeneralMy vote of 5 Pin
Akram El Assas at 4-Mar-12 7:57
memberAkram El Assas4-Mar-12 7:57 
GeneralRe: My vote of 5 Pin
Christoph Keller at 4-Mar-12 12:33
memberChristoph Keller4-Mar-12 12:33 
GeneralMy vote of 5 Pin
Sunasara Imdadhusen at 22-Sep-11 0:12
memberSunasara Imdadhusen22-Sep-11 0:12 
GeneralRe: My vote of 5 Pin
Christoph Keller at 23-Sep-11 2:53
memberChristoph Keller23-Sep-11 2:53 
QuestionMy Vote of 0 Pin
Dewey at 28-Aug-11 16:20
memberDewey28-Aug-11 16:20 
AnswerRe: My Vote of 0 Pin
Christoph Keller at 28-Aug-11 20:08
memberChristoph Keller28-Aug-11 20:08 
GeneralMy vote of 5 Pin
Anurag Gandhi at 16-Aug-11 2:01
memberAnurag Gandhi16-Aug-11 2:01 
GeneralRe: My vote of 5 Pin
Christoph Keller at 16-Aug-11 19:44
memberChristoph Keller16-Aug-11 19:44 

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
Web02 | 2.8.150427.1 | Last Updated 28 Aug 2011
Article Copyright 2011 by Christoph Keller
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid