Mock tests, Interview questions, Tutorials and Tech news
 
 
Home > Programming / tutorials > Microsoft Chart Control Tutorial

Microsoft Chart Control Tutorial

Introduction
In this tutorial we will explore the Microsoft Chart Control, the new addition to .Net framework and how we can use this in our web application. So now there is no need of any third party tools to add chart and graph in our ASP.Net web application.

Prerequisites
• Visual Studio 2008 SP1
• .Net framework 3.5 SP1
• Microsoft Chart Control (MSChart.exe)
• Visual Studio 2008 support tool for the chart control (MSChart_VisualStudioAddOn.exe)
Please note that MSChart is not compatible with .Net framework versions below 3.5

Installation

Download the above mentioned files from Microsoft. After installing .Net framework 3.5 SP1 install MSChart.exe first and then the add-on file MSChart_VisualStudioAddOn.exe . This add-on will add the chart control in the Visual Studio toolbox. Once both the files are successfully installed then you are ready to go.

Main Properties Of MSChart

• Series: Data that you plot in your Chart area
• ChartAreas: Area where the chart is plotted. One chart may have many ChartAreas and that means you can plot more than one chart.
• ChartType: Set the chart type (i.e Line,Pie,Bar etc)
• Palette: Set the color of your chart
• Titles: Text used to describe the chart
• Labels: Text used to describe the axes/points

Creating the Web Application

In this tutorial we will create a web application which displays the chart on the web page and also by connecting SQL Server 2008 database table. Here you go step by step:
1. Open Visual Studio 2008.
2. From File->New->Web Site create a new website.

Figure 1: File->New->Web Site

Figure 1: File->New->Web Site

3. The new website window will be opened and select ASP.Net web site
4. Name it as “ChartExample”.

Figure 2: Create the  ‘ChartExample’ site

Figure 2: Create the ‘ChartExample’ site

5. You can select the language as Visual Basic/Visual C#. In this tutorial we show the application in Visual C#.

The project will consist of a Default.aspx page, an App_Data folder and a web.config file.

Now we will add the asp.net chart control in the web page . If you make the installation properly as mentioned above then you can find the MS chart control as shown in the following diagram:

Figure 3: MS Chart control in the Data tab of the toolbox

Figure 3: MS Chart control in the Data tab of the toolbox

6. Double click the Chart item in the toolbox (or you can simply drag and drop the control from the toolbox) and it will add the ASP.Net chart control as ‘Chart1’ in the Default.aspx page. If you go to the design mode of the web page you will find a Bar chart has been added in the page but the X and Y axis here dummy and does not reflect any data. It is simply the interface of the chart so that you can configure the chart.

Figure 4: Chart1 in the Default.aspx page

Figure 4: Chart1 in the Default.aspx page

Here is the screen shot of the source view of the Default page:

Figure 5: Source view of Default page

Figure 5: Source view of Default page

Now we will add the real data for display in the Page_Load() event of Default.aspx

7. Go to the code behind page i.e Default.aspx.cs and add the following lines of code

Figure 6: Code in Page_Load () event

Figure 6: Code in Page_Load () event

8. Now press F5 to run the web application and you can find the following output in the Default.aspx page. You will get the Line chart as you mention the ChartType as Line. But you can change it accordingly. In Step 9 we show the example of a Pie chart

Figure 7: Output as a Line chart

Figure 7: Output as a Line chart

9. To get the Pie chart of the given data you can change the ChartType like this in Default.aspx.cs page:

Chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;
And here is the output as Pie chart:

Figure 8: Output as Pie chart

Figure 8: Output as Pie chart

10. You can also change the chart type from the Design mode of Default.aspx like this:
Go to the Design Mode->Select Chart1->Press F4 and the Properties window of Chart1 will be opened. Now click on ‘Series’ and set the chart type according the requirement.

Figure 9: Change the Chart Type from the design mode

Figure 9: Change the Chart Type from the design mode

11. Now we are going to extract the data from SQL Server tables and bind the data for our Chart1.

12. In this example we have created a database named ‘Practice’ in our SQL Server and created a simple table called ‘StorePayments’ which contains the StoreName and the Amount to be paid.
Here are the table schema and values inserted shown:

Figure 10: Structure of the table ‘StorePayments’

Figure 10: Structure of the table ‘StorePayments’

Figure 11: Data in the table ‘StorePayments’

Figure 11: Data in the table ‘StorePayments’

13. Now add the connection string in the web.config file like this within the’ <appsettings>’ section:

<add key=Connectionstring value=Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=Practice />

14. In the code behind page (Default.aspx.cs) we will define a function which makes the connection with the database and stores the values in a dataset and at last it returns the dataset. Here is the snapshot for the function FillData():

Figure 12: Inserting the data from the table into a dataset

Figure 12: Inserting the data from the table into a dataset

15. At last we call this function in the Page_Load() event and store the values of two columns into two arrays. We pass these two arrays in the DataBindXY() function as arguments. Here is the code for the Page_Load() section:

Figure 13: Binding the data at the Page_Load() event

Figure 13: Binding the data at the Page_Load() event

16. Now if we run the application we will find the output like this :

Figure 14: Data of the table ‘StorePayments’ is populated as Bar Chart

Figure 14: Data of the table ‘StorePayments’ is populated as Bar Chart

We can again change the chart type as described in step 9 and 10 according to our requirement.

Summary

In this tutorial we described the main features of Microsoft Chart Control , installation procedure and how we can use these charts in our web application. We have also shown how to bind the data from the SQL Server here.

Be Sociable, Share!
  1. April 29th, 2013 at 03:28 | #1

    This site was… how do I say it? Relevant!! Finally I have found something that helped me.

    Thanks!

  2. August 21st, 2012 at 21:50 | #2

    Hi,

    The http://www.skill-guru.com/blog/2009/11/03/microsoft-chart-control-tutorial/ link seems to be broken. i won’t be able to see any of the images. could you please provide me the link where i can access. I have been searching for ms chart controls. this seems to be a very good article but i have problems with viewing the images. could you please help me.

  3. lakshman
    March 16th, 2012 at 06:50 | #3

    please tell me how to add trend graph(comparision graph) in asp.net.for example you want to know the sales of aproduct of last two years.take x axis values(sales) and y axis (years).

  4. lakshman
    March 16th, 2012 at 06:46 | #4

    how to add trend graph in asp.net

  5. Amandeep Singh
    February 20th, 2012 at 03:32 | #5

    simple,straightforward,easy to understand and implement……thanks for ur article

  6. October 11th, 2011 at 01:59 | #6

    nice article it’s it’s very helpfull…

  7. Mangesh
    September 20th, 2011 at 06:38 | #7

    Thanks! can you help me with vb coding instead of C# for above mentioned problem

  8. Swathi
    September 17th, 2011 at 08:40 | #8

    Can you please explain why the bar chart is horizontal. as you have selected the name as X axis and amount as Y axis?? As i too got the same result…. kindly help…

  9. Larry
    June 3rd, 2011 at 17:50 | #9

    Does anybody know if the Chart control can be turned into a LOG or Semi-LOG chart?

  10. November 16th, 2010 at 00:23 | #10

    JAI MATADI . ..

    the Tutorial is fantastic …

  11. suresh K
    April 16th, 2010 at 05:16 | #11

    Hi how to make asp.net 3.5 chart controls to be click able controls.

  12. suresh K
    April 16th, 2010 at 05:16 | #12

    Hi how to asp.net 3.5 chart controls to be click able controls.

  13. January 28th, 2010 at 08:33 | #13

    Yogesh, I will ask Arunava to reply to your query.

  14. January 28th, 2010 at 07:39 | #14

    How to find the region click on pie chart?
    I have to find the which region on pie chart is click?

    thnx

  15. arunava
    December 6th, 2009 at 12:48 | #15

    @Jackson. You can bind the data within Load() event of the chart and if any datapoint exceeds a limit then you can set the color of the bar like the following code:
    Chart1.Series[0].Points[i].Color=System.Drawing.Color.Red
    Here i is the loop count integer used to bind the data points. Hope it will solve your problem.

  16. Jackson
    November 30th, 2009 at 03:32 | #16

    Hi, very good article.Thanks for this blog entry.Btw, can I change the color of individual bars in the bar chart conditionally? I mean , if the y axis value exceeds a limit, can I change the color of that particular bar to red ? Is there any event for the chart control that is similar to Gridview’s RowDatabound event?

  17. November 23rd, 2009 at 15:34 | #17

    @Apurv. Thanks Apurv, Glad you liked the Microsoft chart tutorial

  18. apurv
    November 23rd, 2009 at 15:26 | #18

    thanks! very good tutorial. simple to understand and highlighting a very important new addition to .NET

  1. November 29th, 2009 at 14:55 | #1
  2. December 2nd, 2009 at 16:06 | #2

Get Adobe Flash playerPlugin by wpburn.com wordpress themes