Microsoft Chart Controls For ASP.NET

Many times, I have seen questions about where to obtain Charting controls for ASP.NET web applications, and until recently, the answer has always been to have a look at many of the third party offers that are available from the leading control development companies. That is until Microsoft released their Chart Controls for both Windows Forms and ASP.NET to work with .Net 3.5 SP1.

To begin with, you need to download MSChart.exe, and you will also find life a lot easier if you install the Visual Studio Add on that adds the charting control to the toolbox and offers Intellisense support for the components too, and also download the .chm documentation. There are also a load of samples showing the charts being used against a variety of data ssources, such as xml, csv, Excel and a typed dataset. These can be downloaded from http://code.msdn.microsoft.com/mschart.

Once you have installed the .exe and the VS Add on, you will see a chart icon in the Data section of the Toolbox in Visual Studio, but if you are using Visual Web Developer Express, you will need to add it manually. This can be done by right-clicking on the Data section header, and choosing Add Items.

From there, select the System.Web.UI.DataVisualization.Charting flavour of Chart, and click OK.

That's it. The Chart icon should appear in your toolbox, ready to be dragged onto the Forms Designer. Once you do, you are presented with a default vertical bar chart.

To change the chart type, you need to find the Series option in the Properties panel for the Chart. If you click next to (Collection) a button with ellipses will show, and clicking on this will reveal the Series Collection Editor. In the Chart section, you will find Chart Type, and a drop down offering you a selection to choose from. I chose Pie.

There are a huge number of options available to format the chart. These are found in the Chart section of the Properties, and are generally members of collections. ChartArea options include the ability to set a 3D appearance, inclination etc of the actual chart; Legends and Title allow you finer control over these areas, and Series holds one of the most important options (in the Data Source section): XValueMember and YValueMembers. These must be set to bind data to the chart, and to prevent a blank image being rendered.

I drag a SqlDataSource onto the designer, and configure it to connect to an old copy of this site's database, and apply the following SQL to it:

  

SELECT Categories.Category, COUNT(ArticleCategories.CategoryID) AS TotalInCategory

FROM ArticleCategories

INNER JOIN Categories ON ArticleCategories.CategoryID = Categories.CategoryID

GROUP BY Categories.Category

  

This produces a resultset that shows how many articles there were in each category on my site during stage 2 of its evolution. Having done that, click the smart tag on the chart, and choose the datasource. At this point you can normally run the page if this was a GridView or similar databound control, but if you do, the result would be a totally blank page. Now you need to go back to the Properties panel, and find the Series section and configure the XValueMember and the YValueMembers as mentioned previously. Fortunately, the two values that are being returned are available as dropdown options.

I select Category for the X value, and TotalInCategory for the Y values, and run the page:

The result is far from satisfactory, so I fiddle with some more of the formatting properties and the size and get something much nicer:

The charts are rendered as images. The default is to use an HttpHandler to stream the image to the browser as a png file - all managed by the Chart library. However, there are options to change the image type to jpg, bmp or emf files and to save them to the filesystem and use a straightforward <img> tag to show them. The documentation is quite comprehensive in its coverage of the library classes etc, but is very disappointing in its lack of walkthroughs or easier explanations or notes as to what each property does, and what effect changing it might have on the resulting graph. However, there is already a forum dedicated to the chart control library at MSDN forums, and no doubt most beginner questions will be answered there as it grows.

 

Date Posted: Friday, November 28, 2008 1:38 PM
Last Updated:
Posted by: Mikesdotnetting
Total Views to date: 48656

12 Comments

Monday, March 2, 2009 6:55 AM - Dhruv

Hi Mike! Your chart blog is not going in depth for how to utilize the chart controls for various charttypes. I intend to use them for various type,i.e. pie charts, bubble charts,bar charts etc. So, if u could guide me to that,it will really be nice.

Monday, March 2, 2009 7:12 AM - Mike

@Dhruv

The article was only intended to act as an introduction to the controls when they were first released last year. If you want to know more about how to use them, I suggest you try the documentation that comes with them.

Friday, March 6, 2009 11:53 AM - Nilesh

this is very good document and site is asom...
You r doing greate job dear thank a lot.....

Wednesday, April 15, 2009 8:18 AM - Nish

how to use bubble chart in MS Chart

Wednesday, April 15, 2009 10:33 AM - Mike

@Nish

The documentation that comes with the chart controls has details

Friday, December 25, 2009 7:56 PM - ferdy

I've Visual Web Developer 2008. I tried to installing mschart and relative add-on for Visual Studio, but it was in error. If I remember the error message was: Formatetc error. Or similar to.
Help me. Thank's.

Tuesday, December 28, 2010 5:55 AM - Manivel

Hi i was not able to add the chart control by the above method in visual studio 2005

Tuesday, December 28, 2010 9:21 AM - Mike

@Manivel,

VS 2005 doesn't support ASP.NET 3.5 or 4.0, so you should look at downloading the free Visual Studio 2010 Express and use that instead.

http://www.microsoft.com/express/Web/

Sunday, March 11, 2012 3:51 PM - Rick

Hello Mike,

I'm trying to add the control to VS 2010 for work on .net framework 3.5 projects. When I add the control it shows up greyed out on the tool box. Any ideas?

Thanks,
Rick

Tuesday, March 13, 2012 6:18 AM - Mike

@Rick,

Sorry - no idea at all. You should post a question to a forum.

Friday, October 5, 2012 12:12 PM - @mayur

Hi Mike!

how to use Pie && Bar chart in VS 2010 ????

Friday, October 5, 2012 12:21 PM - Mike

@@mayur,

I dunno.
Add your comment

If you have any comments to make about this article, please use this form to do so. Make sure that your comment relates specifically to the article above. More general comments can be posted through the form on the Contact page.

Please note, all comments are moderated, and some may not be published. The kind of things that will ensure your comment is deleted without ever seeing the light of day are as follows:

  • Not relevant to the article
  • Gratuitous links to your own site or product
  • Anything abusive or libellous
  • Spam
  • Anything in a language I don't understand including gibberish.

I do not pass email addresses on to spammers, so a valid one will assist me in responding to you personally if required.

Recent Comments

Gautam 11/20/2014 8:01 AM
In response to I'm Writing A Book On WebMatrix
Hello Mike, I read your book, loved it! However, I have a few request/suggestions: 1) an example...

Bret Dev 11/19/2014 8:39 PM
In response to The Difference Between @Helpers and @Functions In WebMatrix
Excellent post! One concern - where can you place global @Functions code within an MVC project to Is...

Rob Farquharson 11/19/2014 4:28 PM
In response to iTextSharp - Links and Bookmarks
How can I place text at an absolute position on the page? Also, how can I rotate text?...

Andy 11/17/2014 8:08 PM
In response to MVC 5 with EF 6 in Visual Basic - Sorting, Filtering and Paging
Hello I'm testing your sorting instructions above. This is great and I was able to get it to work...

Gautam 11/17/2014 5:51 PM
In response to WebMatrix - Database Helpers for IN Clauses
Hi Mike, I am very new to programming: In the above example if I want to use a delete button the...

donramon 11/17/2014 3:22 PM
In response to Entity Framework 6 Recipe - Alphabetical Paging In ASP.NET MVC
Congratulations on your new website look and the excellent articles. Thank you!...

Gautam 11/17/2014 11:26 AM
In response to Looking At The WebMatrix WebGrid
Hi Mike, I add the jquery script at the end of my html file.. when ajax attribute is added to the be...

Chet Ripley 11/15/2014 6:57 PM
In response to Adding A New Field
It appears the command is case sensitive. I had the same issue as Cameron. When I changed the to it...

Alvin 11/14/2014 12:49 PM
In response to Razor Web Pages E-Commerce - Adding A Shopping Cart To The Bakery Template Site
Great article Mike! When do you plan to extend the bakery shopping cart beyond this point?...

Gautam 11/14/2014 10:16 AM
In response to Web Pages - Efficient Paging Without The WebGrid
to get the count can we use only the below sql, why to join category and author table var sql =...