Exploring the ASP.NET 3.5 Chart Controls

Posted by: Suprotim Agarwal , on 12/2/2008, in Category ASP.NET
Views: 167955
Abstract: The new Chart Controls for .NET Framework 3.5 enables ASP.NET and Windows Forms developers to easily create rich and professional-looking data visualization solutions. The Chart Controls currently contains 25 different chart types with 3-D support for most of them, and all of these, available for FREE. In this article, we will create a sample chart using the Chart controls.
Exploring the ASP.NET 3.5 Chart Controls
 
The new Chart Controls for .NET Framework 3.5 enables ASP.NET and Windows Forms developers to easily create rich and professional-looking data visualization solutions. The Chart Controls currently contains 25 different chart types with 3-D support for most of them, and all of these, available for FREE. Amongst the other features found in 3rd party charting controls, the Chart Controls for .NET framework provides feature like DataBinding, Data Export, support for Financial and Statistical data, State Management, Streaming, Serialization and much more.
To get started, download and install the following in the order given below:
Microsoft Chart Controls for Microsoft .NET Framework 3.5 – assemblies containing the Chart Controls (ASP.NET and Windows Forms)
Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 – Add as a control in the Visual Studio toolbox and provides IntelliSense for Chart controls.
Once you have downloaded and installed these components, open Visual Studio 2008. In the Data tab on the Toolbox, observe the new ‘Chart’ control.
Chart Toolbox
To get started, let us create a sample application using the Chart control:
Step 1: Drag and drop the Chart control from the Toolbox to the Design surface of Default.aspx. You will see a ‘Column chart’ which looks similar to the following:
Sample Chart
If you click on the ‘Source’ view of the page, you find the following mark up added to the page:
<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
 
        <asp:Chart ID="Chart1" runat="server">
            <Series>
                <asp:Series Name="Series1">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
By default the ChartType is ‘Column’. In order to change the Chart Type to either Line, Bar, Pie or any of these 25 chart types; with the Chart control selected, go to the Properties window > go to ‘Series’ > Click on the ellipse button(…) > in the ‘Series Collection Editor’, click on the ‘ChartType’ to view and select a different chart type as shown below:
Series Coll Editor
For this demonstration, we will keep the ChartType to the default ‘Column’.
We will be binding the chart to some data. For this purpose, we will be using the SqlDataSource.
Step 2: Click on the smart tag or right click Chart > Show Smart Tag > Choose a DataSource > New Data Source… > Select Database. We will keep the default ID for SqlDataSource, SqlDataSource1 and click OK.
Step 3: On clicking OK, you will be presented with a ‘Configure Data Source’ wizard. Click on ‘New Connection’ to open the ‘Add Connection’. Type your ‘Server Name’ and ‘Select a database Name’ to connect to. Over here, I have typed (local) as the ServerName and the database I am connecting to is ‘Northwind’. Click on ‘Test Connection’ to make sure that there are no errors connecting to the server. Click Ok.
Step 4: In your ‘Configure Data Source’, click Next. An option will be displayed for saving the connection string to the configuration file. Select the checkbox ‘Yes, save this connection as:’ , type a name for the connectionstring ‘NorthwindConnectionString’ and click Next.
Step 5: In the ‘Configure Select Statement’ > select ‘Specify a Custom SQL Statement or stored procedure’ > click Next
SQL Data Src
Type the SQL query to ‘list the count of products in a category’ as shown below:
SELECT CategoryName, COUNT(*) AS ProductCount FROM Products JOIN Categories ON Products.CategoryID = Categories.CategoryID GROUP BY CategoryName
Query
Click Next > Finish.
Step 6: Select the Chart control > Go to the Properties window > ChartAreas property and click the ellipse (…) button to open the ChartArea collection editor. Go to the ‘Axes’ property in the ChartArea Collection Editor and click the ellipse (…) button to open the Axis collection editor as shown below:
Axis Coll Editor
Set the ‘Title’ of the X axis to ‘Categories’ and the ‘Title’ of the Y axis to ‘Product Count’. Click OK to close the Axis Collection Editor and an OK again to close the ChartArea Collection Editor.
With the Chart control selected, go to the Series property in the Properties window and click the ellipse (…) button to open the Series collection editor. Go to the Data Source section and add the XValueMember as ‘CategoryName’ and YValueMembers to ‘ProductCount’. Also set the ‘IsValueShownAsLabel’ to True to display the value of ProductCount on the columns. Click OK.
Series Coll Editor
Step 7: With the properties set, run the application. You will see a chart as displayed below:
Final Chart
I am sure all we developers who have used 3rd party Charting solutions in the past, are going to welcome this awesome control from Microsoft. The best part is that it is available for FREE. For the ASP.NET MVC developers, here’s an article that would interest you Combining ASP.NET MVC and ASP.NET Charting Controls.
I hope you liked the article and I thank you for viewing it.  
 If you liked the article,  Subscribe to my RSS Feed or Subscribe Via Email

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
The History of ASP.NET – Part III (Covers ASP.NET Core)

The History of ASP.NET – Part II (Covers ASP.NET MVC)

The History of ASP.NET – Part I

ASP.NET Web API, RestSharp and Model Error Messages

Broadcast Real-Time Notifications using SignalR, KnockoutJS and SqlTableDependency

ASP.NET Web API: Passing Multiple Objects as an Input Parameters to Action Method

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement by Copyscape



Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by ppp_parvez on Wednesday, December 24, 2008 2:41 AM
hi,
You r doing great job.
Sir i want to download vs 2008 for free, plz kindly send to my mail the url to download visual studio 2008 for free.
Comment posted by Suprotim Agarwal on Friday, December 26, 2008 9:09 PM
Parvez: VS 2008 Trials can be downloaded from here:
http://msdn.microsoft.com/en-us/visualc/aa700831.aspx
Comment posted by Brian W on Wednesday, January 14, 2009 3:32 PM
Nice and easy article. For whatever reason my chart control will not work in VS2008 design mode; error "Error creatign control - Chart1. Object reference not set to an instance of an object." However the control works fine using code-behind. Long stroy short, could you provide the source code for reviewing? I am unable to get the chart to display my datasource data which haoppens to work in my test gridview. Thanks
Comment posted by sathish kumar.n on Friday, January 23, 2009 2:35 AM
this is very usfull forcreate an chart
Comment posted by arusenthil on Tuesday, February 3, 2009 1:39 AM
i am using vs 2008 professional edition so its not installed chart controls in toolbox ..can u pls anyone suggest for that one
Comment posted by kiran on Wednesday, May 6, 2009 1:08 AM
hi this very nice control but how to show timespan values like
1 day 00:10
2 days 23:25
0 days 22:12:12
how to show this values in y axies in chart control?????
Comment posted by Sudheer on Friday, June 19, 2009 6:07 AM
I have a requirement to show the chart inside a gridview. The gridview should be like a master child view and the child view should contain the chart. I tried so many alternatives but was not able to load a chart. Pls let me know if you have any clues.
Comment posted by Mohan on Monday, July 13, 2009 1:16 PM
Is there any possiblity of loading(binding using ajax services) chart control using javascript. Please help me our for doing the same.

Thanks,
Mohan.
Comment posted by Suprotim Agarwal on Friday, July 17, 2009 2:44 AM
Mohan: Do you mean ASP.NET Chart Control. Check this article http://www.codeproject.com/KB/webforms/ms-chart-with-jquery.aspx
Comment posted by jeni on Thursday, August 13, 2009 7:43 AM
i have done the same but my chart is not display in the page.What i have to do for that???
please rpl
Comment posted by Suprotim Agarwal on Saturday, August 15, 2009 2:39 AM
Jeni: Unfortunately that information is not enough to help you out. Use the contact page to mail me the project that's not working.
Comment posted by Priyanka on Thursday, November 26, 2009 6:58 AM
How to enable horizontal scrollbar in chart control?
Comment posted by Aleksey on Friday, February 5, 2010 11:07 AM
Finally, I found what I want! Thanks! But I need same vay detailed instructions to set up properties for PIE chart type, including how to identify what color presents what value.
Comment posted by Viswes on Thursday, February 11, 2010 12:23 AM
Plz provide Pie chart setup properties.
Comment posted by yogesh on Monday, February 15, 2010 1:55 AM
Is this control beta version????
Plz let me know, i want to use it in project.
Thanking u. Gr8 job..
Comment posted by Tanya on Wednesday, April 7, 2010 3:10 PM
hi.

i followed everything you did, but my YValueMembers and XValueMembers have blank dropdowns :(. i tried manually typing in the sql field names, but my chart still comes back blank. please help.
Comment posted by utam kumar on Sunday, July 11, 2010 10:52 PM
All methods and properties of Gridview control in asp.net language c#.
Comment posted by deype0 on Friday, July 23, 2010 9:15 PM
Thanks a lot!
Comment posted by prakash on Friday, September 3, 2010 5:40 AM
i have problem. i'm using XML database to conncet the ASP.net. i'm creating Chart i'm facing some problem to create a chart. already connceted the database. then i'm going to Xvalue , and Y value to assign the value. but only Xvalue member assigned the chart. it's very difficult to assign the Yvalue. plz find the solution and  screenshot send me through my email.
Comment posted by prakash on Friday, September 3, 2010 5:43 AM
how to show this values in y axies in chart control?????
Comment posted by ss on Sunday, March 13, 2011 4:28 PM
really good one......this method of chart control works 4 me....thank you..............
Comment posted by Pankaj Nikam on Saturday, June 4, 2011 1:35 AM
Excellent tutorial about charting. Found it to be useful. Thanks a lot Suprotim :)
Comment posted by parag lombar on Wednesday, August 24, 2011 6:44 AM
How to add chart control for vs2008 in windows form application?
Comment posted by Narender on Monday, November 14, 2011 3:16 AM
Thanks for the info. installed chart exe and was trying to find on tooobox,everywhere but no help. Then landed on your blog and found that I need to install visual studio add on. I can now see chart control right on my vs 2008. Thanks.
Comment posted by Ahmed Shadab on Tuesday, November 22, 2011 12:33 AM
Hi,I am new to asp.net and was trying to create different charts which should dynamically responds according to the database. The steps helped me a lot but even going step by step I still have the same problem. The content in the database is not reflecting in the chart. Kindly suggest a remedy.
Comment posted by Ahmed Shadab on Tuesday, November 22, 2011 12:35 AM
Hi,I am new to asp.net and was trying to create different charts which should dynamically responds according to the database. The steps helped me a lot but even going step by step I still have the same problem. The content in the database is not reflecting in the chart. Kindly suggest a remedy.
Comment posted by Amandeep Singh on Monday, February 20, 2012 3:34 AM
This article is easy simple and straight forward and easy to implement.......can you tell me that how to change color of each bar line in  graph.
Comment posted by Narayan.K.V on Tuesday, April 17, 2012 2:36 AM
VERY EASY and Simple
Comment posted by Raquel Garcia on Tuesday, April 24, 2012 4:51 AM
Muy buen articulo, gracias por explicarlo tan sencillo, con imagenes, y textos breves.
Estuve buscando por ahi esta propiedad: ‘IsValueShownAsLabel’ que pone el numero total al final de cada columna; y la encontré aquí...

Ahora tengo que encontrar, que propiedad escribe el nombre a todas las columnas, pues solo me escribe el nombre de algunas...

Un saludo
Comment posted by Raquel Garcia on Tuesday, April 24, 2012 4:57 AM
Amandeep: (i think you solved that time ago, but i tell something...)

In the chart´s properties, and in the series´s properties; there are a propertie 'Palette' with diferent options: EarthTones, Chocolate, GrayScale...

you can use that propertie, and change the bar's colors in the chart.

greets
(sorry for my bad english)
Comment posted by Raquel Garcia on Tuesday, April 24, 2012 10:04 AM
Amandeep: (i think you solved that time ago, but i tell something...)

In the chart´s properties, and in the series´s properties; there are a propertie 'Palette' with diferent options: EarthTones, Chocolate, GrayScale...

you can use that propertie, and change the bar's colors in the chart.

greets
(sorry for my bad english)
Comment posted by Ashish Pandey on Saturday, April 28, 2012 12:06 AM
Thanks suprotim for this wondorful sharing.
I want to show population count chart year wise like in one column i have country name and i have many columns for years like 1800,1850,1900,1950,2000,2012 and population count for each country as per year and i want to show this info as chart...can u please let me know if is this possible with ASP.NET chart and how?
Thanks,
Comment posted by Rajan Arora on Thursday, May 24, 2012 3:22 AM
Hi,
I want the custom x axis interval i.e i want to display the last 8 months on the x axis that should change as the next month comes automatically.
Thanx a ton in advance.  
Comment posted by Margo on Monday, August 13, 2012 1:55 AM
Hallo,

is ASP.NET 3.5 Chart Controls can be use for free ?
Comment posted by Ark on Monday, February 25, 2013 2:57 AM
Hello Sir,
I need to change the color of column chart bars depend upon the database value dynamically. If you know the code, Can u please help me.
Thanks
ark
Comment posted by shree on Sunday, March 10, 2013 11:27 PM
really thankyou  so much for this chart example
Comment posted by Muhammad Raheel Yousuf on Monday, April 8, 2013 6:30 AM
Nice Article .
Comment posted by Keerti Singh on Thursday, May 9, 2013 6:07 AM
nice read and helpful! could you please tell me any free ASP .NET chart control which is compatible with smartphones and tablets?
Thank you
Comment posted by monalisa patnaik on Thursday, July 18, 2013 1:52 AM
hi,
I am using the ajax Line chart.and I want to remove the default blue border  color from the Line chart. i used the property of border width=0 but still the border color remains the same. please help me to get out of my problem.

any help will be highly appreciated.
Comment posted by padmashree on Wednesday, September 25, 2013 6:06 AM
sir i have created the chart same like this. but currently i did not get x axis value dynamically.
Comment posted by padmashree on Wednesday, September 25, 2013 6:07 AM
which means x axis values showing between the two intervals.
Comment posted by Karthik Vadla on Friday, July 11, 2014 6:46 PM
Nice article,Sir is there any way to show the bar chart horizontally instead of vertical.
Comment posted by sain kaur on Tuesday, September 30, 2014 1:18 AM
heloo am new to c# and visual studio 2008, i need to knw how can i make changes in chart x axis and y axis ? meand how can i display chart according to my readings placed in excel sheet ??
Comment posted by sain kaur on Tuesday, September 30, 2014 1:19 AM
heloo am new to c# and visual studio 2008, i need to knw how can i make changes in chart x axis and y axis ? meand how can i display chart according to my readings placed in excel sheet ??