Microsoft Chart Control Tutorial
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.
• 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
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.
3. The new website window will be opened and select ASP.Net web site
4. Name it as “ChartExample”.
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:
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.
Here is the screen shot of the source view of the 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
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
9. To get the Pie chart of the given data you can change the ChartType like this in Default.aspx.cs page:
Chart1.Series.ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;
And here is the 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.
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:
13. Now add the connection string in the web.config file like this within the’ <appsettings>’ section:
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():
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:
16. Now if we run the application we will find the output like this :
We can again change the chart type as described in step 9 and 10 according to our requirement.
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.