Chart Control in Visual Studio 2010 ASP.Net and Windows application

Posted By:Karthikeyan AnbarasanPosted Date:July 22, 2011Points:200
Category: ASP.NETURL:http://www.dotnetspark.comThis article explains the use of chart control from the basic on how to install the required software for making the development environment and finally with a very good example on both web and windows applications.

This article explains the use of chart control from the basic on how to install
the required software for making the development environment and finally with a
very good example on both web and windows applications.

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 much graphical format where most of the end users are
eager to look into. Prior to chart controls, developers need to check out for
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 much aware of the present scenario
of showing the data in image rather than a grid view or some data viewer
controls. Chart control introduced by late September 2009 as a separate service
pack 1 with visual studio 2008. In Visual Studio 2010, Microsoft added the
control in-build which provides developers much easier to use the control. This
control can be used in both windows and web application to show the rich user
data in a good graphical format.

Chart control offers wide variety 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 a count of around 35 distinct chart type in the latest
version of the 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 controls API provides 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 across the
requirement.

In this article we will see on 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 on using this control in 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 no need to think much on 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 on 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 on
the steps on 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:

Microsoft Chart control 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 below
for the list of downloads with URL).

Microsoft Chart control samples are number of samples on both windows and web
application which provides a very good start for the beginners to start and use
the control

Microsoft 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's from the links provided we need to install and
setup the development environment in order to start developing a charting
application. We will see in detail on how to install and configure the above 3
downloads one by one.

Microsoft Chart Control - Installation:

Click on the link above will open the window as shown in the below screen.
Click on download (Mschart.exe) and save in 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 GAC we can used it globally without placing the
dll's in each and every BIN folder. When we publish the project in the server
there we 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.

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

Once the installation is completed we can 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
is inbuilt provided with this control we no need to follow the above steps for
the Visual Studio 2010 version. Now we will see some samples on 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 available in build 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 (3rd
download). Let us see the samples by opening the project and running the same.
We need to navigate to the place where we downloaded the samples and open the
solution as shown in the screen below

It will open the solution will 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 can see the different chart type 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 below 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 need to take care as per their requirement. On 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 below screen

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

Chart Control in Web Application:

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 as
WebDashboard as shown in the below 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 below
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 Wizard we can configure the data source as shown in the
screen below.

Just follow the below 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 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 will 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 select a
product table which has some basic product details as shown in the screen
below

Now once we selected the data required from the window click on NEXT button
will 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 once everything is configured we need to click on the FINISH button to
complete the configuration and we can 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 result we
will execute the project. To execute the solution press F5 we can see the screen
with the chart on to it as shown in the screen below

This is our expected output out of the chart control which we tried to create
of. 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 below screen

Select the tool box will 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 looks presentable. First enable 3D view as shown
in the below screen

Now we need to select the Inclination on how much the 3D view should be shown
to the user, 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 can 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 major of our output in the chart as per our requirement.
Here in our example we have set it to 50 and we can see the change in the chart
as shown in the screen below

Next property is the Back Color, we can change the background color of the
chart as per the requirement using the property as shown in the screen below

Once we are done with these configuration click on OK button to complete the
first section of the configuration and we can see the changes straight forward
on to 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 below screen

Clicking on the tool box will open the window as shown in the screen below.
Here we need to configure for the Legends to show on to the chart.

Now click on the ADD button at the left bottom will automatically add the
legend to the chart and show the result immediately as shown in the screen
below. We have many options to configure as per our requirement 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 inbuilt to
select it from much suitable one as per our website recommendations. This
property is something like of themes applying to the chart as shown in the
screen below.

Now we are done with major of the enhancements which are 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 can see the screen loaded and shown as below

Now we are done with the charting control for a web application, which 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:

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 below screen

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

Now like in web application we will not be popped up with the tool box which
has the list of chart types and the data source in build read for customizing.
We need to manually do the changes here as per our requirement. We will see one
by one which 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 on OK button will change the chart image
to Doughnut as shown in the below 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. Once selected the database and clicking
on NEXT will go to the next screen where we need to do the configuration as
shown in the screen below

Here based on the requirement 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 and clicking on Next 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 will 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
can 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 ProductMaster
table is the source we have selected that. Once clicked on 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 Yaxis member 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

Once we selected 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 can 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 like this article, in our coming series I will explain on the
different chart types and on how to get data from different source and binding
the chart at runtime etc. Post your comments if any doubts and any feedback so
that it will be useful for me to cover in my upcoming articles.