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 !!!

posted @ Monday, December 01, 2008 6:36 PM

Print

Comments on this entry:

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

Left by Thanigainathan.S at 12/1/2008 11:42 PM
Gravatar
Hi,

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

Thanks,
Thani

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

Left by Jeny Young at 12/2/2008 8:11 AM
Gravatar
Thanks for the sample application

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

Left by siddu at 12/2/2008 7:10 PM
Gravatar

Hi thanks for giving the toolbox

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

Left by OM at 12/3/2008 1:19 AM
Gravatar
nice and short. thanks....

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

Left by Kishore T at 12/4/2008 6:40 PM
Gravatar
I want to change the line width of a Line chart. How can i do this?

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

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

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

Left by Saran at 12/9/2008 12:42 PM
Gravatar
It's fine. Crisp and able to follow easily.

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

Left by Charting in ASP.NET, ASP.NET Cha at 12/18/2008 1:57 AM
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.

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

Left by asp.net example at 1/3/2009 8:39 PM
Gravatar
Nice blog...

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

Left by Anders Bratland at 1/24/2009 4:29 AM
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?

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

Left by Cybertech.tutor at 1/29/2009 5:08 PM
Gravatar
Step by step method to add control in to toolbox

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

Left by Nisarg shah at 2/15/2009 1:21 AM
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..

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

Left by PindaKaas at 4/14/2009 5:42 PM
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...

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

Left by Dhruv M. Patel at 4/29/2009 12:14 PM
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

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

Left by microsoft at 7/24/2009 6:05 AM
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..

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

Left by sara at 10/26/2009 12:51 AM
Gravatar
It is a very nice article. It really helped me to create a chart.

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

Left by Harish KV at 11/10/2009 6:52 PM
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

Your comment:



 (will not be displayed)


 
 
 
 
 

Live Comment Preview:

 
«November»
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345