Introduction
This Part 1 of the two part article shows how you may use the new MS Chart control in an ASP.NET web application. In this 1st
part, the following details are discussed:
- Downloading and installing the control
- Selecting a source of data
- Creating an ASP.NET Web Site application and adding a Chart Control
- Configuring the data source using the wizard
- Identifying elements on the chart’s template
In Part 2 we will bind the chart to the data as well as modify the properties of the chart using code to display a 2D
chart in 3D.
MSChart Controls
Prior to 2007 if you wanted to use a chart in a Visual Basic application you would have used the MS Chart Control 6.0 (OLEDB)
[MSChart20.OCX ActiveX] control available on Professional and Enterprise editions. The chart control could graphically
display data and format the various regions of the chart. The control had sparse documentation and it was not very easy to use as
you would have noted in many forums. But it was very popular and continues to be so. In the latter half of 2008, Microsoft shipped
the Microsoft Chart Controls for Microsoft .NET Framework 3.5. Now with this chart, controls are available for both Windows and
Web forms controls.
Downloading and installing the controls
For just the controls you need to install (MSChart.exe) which installs the assemblies into the GAC. However for the controls
to appear in Visual Studio 2008 SP1's Toolbox you also need to download (MSChart_VisualStudioAddOn.exe). If you need to use the controls with other languages
(Python, Perl etc) then there is a language pack as well. Herein we will be using the standard languages.
Source of data for the chart
We will be using the data in the PrincetonTemp.xls table on MS SQL Server 2008’s TestNorthwind database created in an earlier tutorial on this site.
You could create such a table using a suitable query. This table shows the temperature in a year and the record high temperature for a New Jersey town in two
columns as shown in this query.
Figure 1: Chart data is prepared here
Creating a ASP.NET Website application
From File | New | Website... you can bring up the New Web Site window where you can choose to create an ASP.NET Web Site as
shown in the next figure. Make sure you provide a name for the website. Herein it is WebChart.
Figure 2: Add a new ASP.NET web site
This creates a
Web Site project in the file location shown in the above figure. The language can be Visual Basic or C#. The project will consist
of a web.config file; an AppData folder and a Default.aspx page.
Add a MS Chart Control
Assuming you have installed the programs detailed earlier you should be able to find the MS Chart Control in the Toolbox as
shown in the next figure.
Figure 3: Chart Control in the Toolbox
In the
Toolbox double click the Chart item. This adds an ASP.NET chart control instance Chart1 to the Default.aspx page as
shown in the next figure. The chart x and y axis are dummy and does not represent any data as no data source is chosen. Although
it looks like a design interface, it is actually a preview of the chart as it gets configured.
Figure 4: Chart on the default.aspx page.
The
source view of the default page is as shown here. The portion related to the chart is shown in blue. This is an ASP.NET data bound
control similar to other ASP.NET data controls.
The namespace referenced is System.Web.UI.DataVisualization. This is very rich with many classes. A portion of this
is shown in the next figure as seen in the Object Browser. For programmatic access this is an invaluable resource.
Figure 5: Object Browser displaying Charting classes
The properties, methods and events related to the chart are also available during coding in the form of
IntelliSense as shown in the next figure. In this tutorial we will however use the RAD capabilities built into the IDE.
Figure 6: Intellisense support for the chart control
Create a data source for the chart
Figure 7 shows the chart with the smart tasks (Chart Tasks) drop-down. If the drop-down is not visible, click the handle
(little arrow) to reveal the drop-down items as shown.
Figure 7: Create a new data source
In the drop-down
shown click < New data source…>. This brings up the Data Configuration Wizard as shown in the next figure. For this
tutorial the TestNorthwind data base on the SQL Server 2008 will be used.
Figure 8: Choose a data source
When you accept and click
OK, the next page of the wizard pops-up as shown. You need to provide the connection string in this window. I will use an existing
connection to the access the TestNorthwind database on the local SQL Server 2008 (Mysorian) on my computer (Hodentek2). If you do
not have a connection you need to click on the New Connection…button and follow the wizard.
Figure 9: Choose a data connection
After choosing the
above connection click Next that gets enabled. This displays the window that provides an option to save the connection
string to the web.config file. Make sure you read the information on this page.
Figure 10: Save connection information to web.config file
Click Next. The 'Configure the Select Statement' page of the wizard gets displayed with the default
option 'Specify columns from a table or view' with the drop-down displaying some default table. Click on the drop-down handle and
choose the table PrincetonTemp as shown. Place check marks for all the columns (one check mark in the checkbox with the
star will select all columns) as shown in the displayed Select statement at the bottom of the window.
Figure 11: Select data to be displayed by the chart
Click Next. The 'Test Query' page of the wizard gets displayed with a silver gray empty area. Click the Test
Query button. The result of running the query shown at the bottom of the page gets displayed in the empty area as shown in the
next figure.
Figure 12: Review data that is going to be displayed
Click Finish. An instance of SqlDataSource, SqlDataSource1 gets added to the page as shown in
the chart’s drop-down smart tasks menu. In the page’s source you will see the code shown in Listing 1 added to the
page.
Unlike more developed controls like GridView and others, Configure Data Source is the only wizard attached to the
design area of the chart. All other chart related items must be configured using the property window of the chart that can be
displayed by right clicking the chart and choosing Properties from the drop-down menu as shown or write code. If you are using the
design time values to configure the chart properties you need to get a good handle on this window.
Figure 13: Chart Properties Window
Chart control children
The chart is a collection containing other collections as shown in this figure displaying the IntelliSense drop-down list. The
chart has ChartAreas, Legends, MapAreas, and Series etc. The data from the source is bound to the series of which there could be
more than 1. In the PrincetonTemp data there are two series, one for the monthly temperature and one for the record high
temperature. All these connections can be configured at design time by accessing the wizards they invoke.
Figure 14: Collections inside the chart control
In the source code of Default.aspx what we see is shown in the next figure. The BorderSkin property has
been set to one of its many other values which will make the chart appear as if it is on a raised surface.
Figure 15: Chart related source code
Summary
In this article the recently shipped MS Chart Control and its features were described. A SqlDataSource to bind to the control
was also configured to bring data from an Excel Spreadsheet file. This data will be bound to the chart in Part 2 of the article.
About Jayaram Krishnaswamy
 |
Sorry, no bio is available
This author has published 7 articles on DotNetSlackers. View other articles or the complete profile here.
|
You might also be interested in the following related blog posts
New article: How to detect and avoid memory and resources leaks in .NET applications
read more
Important releases from Microsoft you may have missed
read more
GiveCamps Get a new Sponsor
read more
New location (and look) for ASP.NET documentation
read more
Making a Step chart in RadChart for Silverlight and WPF
read more
My History of Visual Studio (Part 6)
read more
Adding IIS Manager Users and Permissions using PowerShell
read more
Aspose.Total for .NET Q3 2009 Released
read more
DotNetNuke Fusion Results for Q3
read more
WebChart AJAX Zooming and Scrolling: How to get the most out of your data
read more
|
|
Please login to rate or to leave a comment.