Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Here is a HelloWorld sample on the new ASP.NET Charting control.

To begin with, install the free Microsoft Chart Controls and the "Tools for VS 2008 for Chart Controls" from here and here

Note that if you don’t install the Tools for VS 2008 for Chart controls, the Chart Server Control doesnt show up in the Toolbox

Once you are done with the installation, restart Visual Studio if you are already running the same (of course, save your work)

1. Start Visual Studio 2008 and create a File – New – ASP.NET Website or a Web Application

2. From the ToolBox, under Data tab, pick up the “Chart” control (the icon would be a series of colored bar graphs) and drag and drop it into the page.

3. Click on the smart tag for configuring the Chart control and Choose DataSource

4. Select “Database” and provide the connection string to your database server (in my case I chose Northwind)

5. Choose to save the connection string etc., and select the Database table (in my case I chose “Category Sales for 1997”)

6. Click “Finish” to complete the process.

7. Now if you run the page you will NOT get the Chart Control.

8. You need to select the Properties of the Chart Control from design view.

9. Make sure under “Data” DataSource is set to “SqlDataSource1” unless you gave a different name and DataMember is set to “DefaultView”

10. Under “Series” in Properties, click on the tab to open up the “Series Collection Editor”.

11. Scroll down the Series1 Properties to DataSource section.

12. Specify “CategoryName” as the XValueMember and “CategorySales” for YValueMembers and click Ok.

13. Build the page and hit F5 to run the page.

14. You will be able to see the Chart in your webpage.

15. Right Click on the chart and you would be able to see that it is an image generated dynamically that can be saved as a “.png” file.

You can download a comprehensive list of samples from here and verify the different implementations and source code for the same.   For more details, visit the forums here

Cheers !!!

Print | posted on Monday, December 1, 2008 6:36 PM

Comments on this post

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Hi,

I have a Excel datasource. Whats the procedures to display the graph for that using chart controls.

Thanks,
Thani
Left by Thanigainathan.S on Dec 01, 2008 11:42 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Thanks for the sample application
Left by Jeny Young on Dec 02, 2008 8:11 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...

Hi thanks for giving the toolbox
Left by siddu on Dec 02, 2008 7:10 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
nice and short. thanks....
Left by OM on Dec 03, 2008 1:19 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
I want to change the line width of a Line chart. How can i do this?
Left by Kishore T on Dec 04, 2008 6:40 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
another nice article: http://brad.w3portals.com/2008/12/c-howto-create-quick-pie-chart-with-new.html
Left by brad on Dec 05, 2008 8:42 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
It's fine. Crisp and able to follow easily.
Left by Saran on Dec 09, 2008 12:42 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Hi,
I installed .NET framework 3.5 service pack1 and free Microsoft Chart Controls on my local system. I could develop some charts also but when I deploy that on to the server It does not work it gives an error saying "unknown sever tag asp chart".My Sever also have windows 2003 service pack 2, .NET framework 3.5 service pack1 and free Microsoft Chart Controls. I observed that my web.config file on local system has at some tags(like controls , httphandlers, assemblies) about charts which are missing on server web.config. I made same changes to my server web.config file but nothing worked. Any help is appreciated Thanks in advance.
Left by Charting in ASP.NET, ASP.NET Cha on Dec 18, 2008 1:57 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Nice blog...
Left by asp.net example on Jan 03, 2009 8:39 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Hi!
Nice Walk-trough! I tried to use the chart control with Windows Azure SDK, and got Out of memory error. When I run it outside Developement Fabrik, it works thogh... Have you tried it with Azure SDK?

Left by Anders Bratland on Jan 24, 2009 4:29 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Step by step method to add control in to toolbox
Left by Cybertech.tutor on Jan 29, 2009 5:08 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
hi.....
thanks a billians for mentioning about the microsoft chart control and also how to use it...
it will help me a lot....
thanks..keep going..
Left by Nisarg shah on Feb 15, 2009 1:21 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
If you want to render a thicker line you want to set the borderWidth from the series to more than '1'. Series (even with line style) don't have a line width.

Set the borderwidth like so if you want to do it in C#:

Chart1.Series["Series1"].BorderWidth = 3;

Good luck...
Left by PindaKaas on Apr 14, 2009 5:42 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Hello there!

Great article.

I was searching so long for an article that could explain me to bind multiple series to single chartarea. Your article truly solved my problem.

Thanks again
Left by Dhruv M. Patel on Apr 29, 2009 12:14 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
so microsoft bought dundas's code. surely MS employees are not capable of developing new products and coding. MS is just good at building upon other's ideas. Your ideas our Targets..
Left by microsoft on Jul 24, 2009 6:05 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
It is a very nice article. It really helped me to create a chart.
Left by sara on Oct 26, 2009 12:51 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Hi, i need to create a chart to represent office timings. The chart should contain office hours on X-axis (from 8AM - 6PM, seperated by one hour) and Working Days on Y-axis (Mon-Sat). The office hours may vary from day to day. I need to show the office hours on the chart, i.e., on Monday office hours are 9AM-5PM, on Tuesday 10AM-3PM.

Thanks in Advance
Left by Harish KV on Nov 10, 2009 6:52 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Nice one, Thanks a lot harish
Left by CP on Dec 19, 2009 7:28 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
If i use two chart controls within same page then second chart is overlapping on 1st char.If u have solution then please write me on my mail.
Thanks in advance
Left by Sandeep on Jan 05, 2010 3:50 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
i want to make a graph based on database in asp.net2.0
Left by hariom on Jan 21, 2010 10:25 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
I want to use charting tools of ms in .net 2.0
is it possible? what steps I have to do if I dont want to install 3.5 framework
Left by shweta choudhari on Jan 24, 2010 11:41 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
I have use chart controller in my web application but it display wrong percentages

this are the value
TOTAL COST : 75000000000.00
LOYALTY DISCOUNT : 7500000000.00

when it display on pie chart
it display TOTAL COST :90.91% and LOYALTY DISCOUNT=9.09%
but it should be 90% and 10 % how can I correct it



chtSavingBrekDown.Series["Series1"].Points.AddXY("Total Cost", totalCost);
chtSavingBrekDown.Series["Series1"].Points.AddXY("Discounted Dolers", discountValue);

chtSavingBrekDown.Series["Series1"].ChartType = SeriesChartType.Pie;// Set the Pie width
//chtSavingBrekDown.Series["Series1"]["PointWidth"] = "0.5";// Show data points labels
chtSavingBrekDown.Series["Series1"].IsVisibleInLegend = true;
chtSavingBrekDown.Series["Series1"].LegendText = "#AXISLABEL";
chtSavingBrekDown.Series["Series1"].Label = "#PERCENT";

chtSavingBrekDown.Series["Series1"]["BarLabelStyle"] = "Center";// Show chart as 3D
chtSavingBrekDown.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;// Draw chart as 3D
chtSavingBrekDown.Series["Series1"]["DrawingStyle"] = "Cylinder";

chtSavingBrekDown.Series["Series1"].Points[1].Color = System.Drawing.Color.Yellow;
chtSavingBrekDown.Series["Series1"].Points[0].Color = System.Drawing.Color.Blue;

chtSavingBrekDown.Series["Series1"].Points[1]["Exploded"] = "true";
chtSavingBrekDown.Legends[0].Enabled = true;
chtSavingBrekDown.Titles[0].Text = "SAVING ESTIMATE BREAKDOWN";
Left by dinesh on Apr 18, 2010 10:13 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
I'm having visual studio 2008. But even after running chart control setup i did not find that control in data tab. Please suggest any other way to solve problem.
Left by Roshan on Sep 01, 2010 4:48 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Rt click on the Toolbox any tab select the choose Items->select Com Components tab->Browse ->Select the \Programfiles->Microsoft chart controls->Assemblies->Select System.Web.DataVisualization.Design.dll,System.Web.DataVisualization.dll
Click on open.So the dll's will be added to the application.And related chart control will be displayed in the tool box.
Left by Aruna on Oct 12, 2010 4:24 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
control will be displayed in the tool box.
Left by صور حزن on Nov 03, 2010 12:53 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
it was very usefull.thnxxxxxxxxx
Left by 123 on Dec 23, 2010 3:35 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
its really very usfull.
Left by m on Dec 23, 2010 3:43 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
hi
will it work in vs2005
Left by mustafa on Apr 13, 2011 12:41 PM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
How can I draw a border around the Legend Text ("My Series 1 Legend Name") of Series Legend please?

<asp:Series Name="Series1" IsValueShownAsLabel="True" Font="Verdana, 8pt, style=Bold"
LegendText="My Series 1 Legend Name" MarkerStyle="Square"
LegendToolTip="Show me the Series pls!" Legend="Legend1" BorderWidth="3">
</asp:Series>
Left by Piyush Varma on Apr 16, 2011 3:27 AM

# re: Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Requesting Gravatar...
Thank you for showing that the basics of ASP
Left by Simple download key on Oct 29, 2011 6:18 AM

Your comment:

 (will show your gravatar)