Chart Control in Visual Studio 2010 (Web and Windows Explained)

Introduction

In this article we are going to see how to use the new charting control with Visual Studio 2010. Chart controls are introduced with Visual Studio 2008 as a patch in Service Pack 1. Chart controls provide a rich user interface for showing the numbers in a very graphical format that most end users are eager to see. Prior to chart controls, developers needed to use third party tools, some open source libraries or use HTML and GDI+ to draw some graphical image as a chart for the end users which requires more user code and time consuming.

Microsoft as introduced this control with a strong awareness of the present scenario of showing the data in an image rather than a grid view or some data viewer controls. The Chart control was introduced in late September 2009 as a separate service pack 1 with Visual Studio 2008. In Visual Studio 2010, Microsoft provided the control in-built which makes it much easier for developers to use the control. This control can be used in both Windows and web applications to show the rich user data in a good graphical format.

The Chart control offers a wide variety of choices to choose the best format required by the end users to view the data. Some of the types of charts available with the control are as follows: PIE Chart, LINE Chart, BAR Chart, BUBBLE Chart, PYRAMID Chart etc. Microsoft has provided around 35 distinct chart types in the latest version of Visual Studio. Also the control provides most of the features required to make the chart more attractive, like providing lines, labels, trend lines etc. The control's API provides an option to make the sorting filter, grouping, searching, merging, splitting and exporting to the required format making the control more robust for the developers to use it for most requirements.

In this article we will see about using the Chart control in both Visual Studio 2008 and Visual Studio 2010 versions starting from the beginner to the experts. Also we will see some good examples of using this control in a Web application and a Windows application to see how flexible the control is used. Microsoft has not provided any Wizard to customize the data chart by giving the data source, customizing the size, look and color of the data, all these things need to be handled by the developer to bind and use the required data format as such.

Since Microsoft provides this chart as a free control along with the Visual Studio, developers have no need to think much about the third parties or the open source tools for charting with the application which gives an advantage to go over this control and use it wherever required. Here we will see how to download, install and use this control in both Visual Studio 2008 and Visual Studio 2010 versions. Since Visual Studio 2008 requires a separate download, we will see the steps of where to download and install the application so that the control will be available in the tool box of the VS 2008 version.

Downloading & Installing for Visual Studio 2008:

The Microsoft Chart control was released as a standalone application with the Visual Studio 2008 Service Pack 1. In order to use this control in VS 2008 version we need to download the control and the libraries from the Microsoft URL (See following for the list of downloads with URL).

Microsoft Chart Control

(Check the following for the download and installation instructions.)

Microsoft Visual Studio 2008 Chart Controls Add on

The Microsoft Visual Studio 2008 Chart Controls Add-on helps to add the control to the toolbox and gives the intellisense support for the chart application.

Microsoft Chart Control Samples - http://archive.msdn.microsoft.com/mschart

The Microsoft Chart control samples are a number of samples on both Windows and web applications that provide a very good start for the beginners to start and use the control.

TheMicrosoft Chart control is the mandatory download remaining 2 things are for our reference purpose which helps to build a very good chart application. Once you downloaded these software from the links provided we need to install and set up the development environment in order to start developing a charting application. We will see in detail how to install and configure the above 3 downloads one by one.

Microsoft Chart Control - Installation:

Click on the link above to open the window as shown in the following screen. Click on download (Mschart.exe) and save it to your local machine.



Now double-click on the Mschart.exe file to install the application. When we install this exe the binaries will be placed in the Global Assembly Cache (GAC) and also will be placed in the ProgramFiles\Microsoft Chart Controls\Assemblies. Since the files are placed in the GAC we can use it globally without placing the DLLs in each and every BIN folder. When we publish the project in the server there will be no need to install the exe; instead we can use the binaries moved to the publish bin folder.

Once you double-click the Mschart.exe it will open the window as shown below. It shows that we need the prerequisite of .Net Framework 3.5 with SP1. Click Next to proceed further.



Click on the license agreement to proceed further as shown in screen below.



The installation process will start and components will be installed one by one and we will see the progress as shown in the screen below.



Once the installation is completed we will see the final message as shown below which indicates that the software has been installed successfully.



We can find the Chart control in the toolbox as shown in the screen below.



Now we are ready with the development environment where we have the chart control installed and tested completely. These are the above steps we need to follow for setting up a development environment for using the Chart Control with Visual Studio 2008 version. As I said earlier since Visual Studio 2010 version includes this control we have no need to follow the above steps for the Visual Studio 2010 version. Now we will see some samples of using the different charts available.

.Net Framework 4.0 developers can omit the steps which we are done for the downloading and installation process since the control is also included in the latest framework. Now let us jump start to see the example of using this chart control.

We have downloaded some samples from the MSDN archive (3^rd download). Let us see the samples by opening the project and running it. We need to navigate to where we downloaded the samples and open the solution as shown in the screen below:



It will open the solution with pre-loaded samples as shown in the screen below:



Now we will build the solution and execute the project to see the result. To do this press F5; you will see the output in IE as shown in the screen below. When its building the project we will see the various chart types build as shown in the screen below.





The left side menu contains the different types of charts and for binding data and some common features required to be used for developing the application as shown in the following screen:



Each chart type is given with a tree view menu which has different types inside it like with normal chart view, 3D chart view and some other properties which developer needs to take care as per their requirements. Upon selecting each chart the sample will be opened in the right side portion with the code as well for C# and VB.Net as shown in the following screen:





With this help of data and the code, developers can develop a chart with ease. Now we will create an application and develop our own chart applications for a windows and a web application.

Chart Control in Web Application:

In this section we are going to see how to use the chart control in a web application. We are going to create a new application in C# and name it WebDashboard as shown in the following screen:



Now once the project solution is opened you can drag and drop the chart control as shown in the screen below:



If we want to change the chart type as per our interest we need to select the tab which appears at the top right corner of the control as shown in the screen below:



In our example I have selected the Doughnut type as shown in the following screen:



Here we have an option to select the data source as well; say if we want to use an XML as a source for the chart we can directly provide the XML path which takes data and show the result in the chart view. In our example we will fetch the data from the database and show the result in a chart. For getting the data from the database using a Wizard we can configure the data source as shown in the screen below.



Just follow the following steps to configure the data source.



Here the pop-up shows the list of data source providers available, since in our example we are going to get the data from the SQL Server we are going to select SQL from the list available as shown in the screen below:



Now click on ok to do the configuration of the server and the database from where we need to pull the data for the chart. It will open a window for taking the connection as shown in the screen below:



Here I have connected to a Northwind database in my local server to fetch the data for the chart. To make a new connection use the New Connection button at the right side and fetch the connection. Once the connection is selected click on NEXT to go to the next window where we need to select the table from which we need to pull the data as shown in the screen below:



Here we can select as per the requirement on the different table or a combination of tables with joins as per the requirement. Here I have selected a product table which has some basic product details as shown in the screen below:



Now after having selected the data required from the window, click on the NEXT button to move to the next screen where we can run the query and test the result set which we are going to show with the pictorial representation using the Chart control as shown in the screen below:



Now after having configured everything we need to click on the FINISH button to complete the configuration and we will see some configuration popups in the base version as shown in the screen below:



The X value member and the Y value member are the places where we need to provide the x axis and y axis like data upon which the chart will be created. Here in our sample we are going to select Product name and Product Id as shown in the screen below:



Now we are half done with the configuration, to see some sample results we will execute the project. To execute the solution press F5 to see the screen with the chart in it as shown in the screen below:



This is our expected output out of the chart control we tried to create. Now we will do some enhancements on making the chart as 3D and some good look and feel to make the end users very attractive. To do some enhancements just select the chart and go to properties and go to the Chart Areas as shown in the following screen:



Select the tool box to open the configuration window for the chart as shown below:



This is the window where we need to make the configuration enhancements for making the chart look better to the end users. We will see the major properties used in order to make the chart look presentable. First enable a 3D view as shown in the following screen:



Now we need to select the Inclination on how much the 3D view should be shown to the user; the best option to show the chart in 3D view to the user will be something around 30 to 60. Here we will select 50 and we will see the inclination in the background chart as shown in the screen below:



Next section is the Rotation; we need to set the rotation something between 30 to 70 to show the majority of our output in the chart as per our requirements. Here in our example we have set it to 50 and we will see the change in the chart as shown in the screen below:



The Next property is the Background Color; we can change the background color of the chart as per the requirement using the property as shown in the screen below:



Upon completion of these configurations, click the OK button to complete the first section of the configuration and we will immediately see the changes onto the chart as shown in the screen below:

Now we will move on to some other properties to enhance the look of the chart. Now again go to the properties of the chart control and go to the Legends section as shown in the following screen:



Clicking on the toolbox will open the window as shown in the screen below. Here we need to configure the Legends to be shown on the chart.



Now click on the ADD button at the left bottom to automatically add the legend to the chart and show the results immediately as shown in the screen below. We have many options to configure as per our requirements as shown in the screen below.



Now clicking on OK will load the properties to the chart control. Now we will move on to the next property PALETTE which has many template palettes built-in to select the most suitable one as per our website recommendations. This property is something like themes to be applied to the chart as shown in the screen below.



Now we are done with the majority of the enhancements required to provide a rich user experience with the help of pictorial representation of data using our Microsoft Chart control. Now to build and execute the project press F5 and we will see the screen loaded and shown as below:



Now we are done with the charting control for a web application. With the above tutorial we can create a chart of our required pattern and create a good rich user attractive chart with the help of the Microsoft Chart Control.

Chart Control in Windows Application:

In this section we are going to see how to use the chart control in a Windows application. We are going to create a new application in C# and name it as WinDashboard as shown in the following screen:



Drag and drop the chart control to the form as shown in the screen below:



Now like in a web application we will not be shown the toolbox with the list of chart types and the data source in build read for customizing. We need to manually do the changes here as needed. We will see one by one as we did for the web application.

Now to select the chart type we need to go to Series and the select the collections as shown in the screen below:

We will see a popup which has the list of chart types out of which we will select the Doughnut chart as shown in the screen below:



After we select the chart type click the OK button to change the chart image to Doughnut as shown in the following screen:



Now we need to select the data source, for that we need to navigate to Datasource in the properties menu and select to add a new datasource as shown in the screen below:



It will open the list of data source providers available as shown in the screen below. From here we will select the SQL database.



Now select the database option from the list using this provider we are going to connect to the SQL server database. After selecting the database and clicking on NEXT it will go to the next screen where we need to do the configuration as shown in the screen below:



Here based on the requirements we can select the model from which the data should be pulled. Since we have the direct connectivity with the database we use the data set model to proceed further. Select Dataset then after clicking on Next it will move to the next screen as shown in the screen below:

Here we use the connection to the Northwind Database; else we can make use of the New connection to connect to any new servers locally or to the network to fetch the data. Once we are done with the connection string click on the NEXT button to have the configuration to select the data from the table as shown in the screen below:



Since we need to pull the data from the table, expand the table node and we will see the list of all the tables as shown in the screen below:



Here we need to select the source table; since in our example the ProductMaster table is the source we have selected that. Clicked the Finish button to complete the data source configuration section to proceed further.
Now if we build and execute the application we will see the empty screen with an empty chart as shown in the screen below:



The problem here is we have not set the X axis and Y axis members to make the chart. So to provide the X axis and Y axis we need to go to the SERIES property and select the collections to mark the X axis and Y axis members as shown in the screen below:



After having select these values, now click on the ok button to complete the configuration and now we are ready to build and execute the project. Press F5 to do so and you will see the end result in a much waited chart format in windows application as shown in the screen below:



Which is almost looks same like the web application result. So we are done with the Windows application chart.

Conclusion:

Hope everyone likes this article; in our future series I will explain the various chart types and how to get data from various sources and binding the chart at runtime etc. Post your comments if you have any doubts and any feedback so that it will be useful for me to cover in my upcoming articles.