The New Chart Control in ASP.NET

asp:Feature

The New Chart Control in ASP.NET

By Joydip Kanjilal

The new charting control for Microsoft .NET Framework 3.5 supports generating a wide variety of charts, such as pie, area, range, point, circular, accumulation, data distribution, AJAX interactive, doughnut, and others. You can use this charting control to declare chart data within the markup code itself or even use data binding to bind data to the control dynamically. This charting control also lets you cache the image and save it on your disk. At runtime, this charting control generates an image that's referenced by the rendered HTML of the web browser. You can use this charting control in both ASP.NET and Windows Forms. This article discusses how you can get started working with this control.

The Prerequisites

To use this charting control, you should have the following installed in your system:

Downloading the Control

You can download the charting control at http://www.microsoft.com/downloads/thankyou.aspx?familyId=130f7986-bf49-4fe5-9ca8-910ae6ea442c&displayLang=en. Once you've downloaded the setup, double-click the MSChart.exe file to start the installation process. Click Next. You'll see a screen on which you'll see Download status, then Installer progress.

You should also download the Microsoft Chart Controls Add-on at http://www.microsoft.com/downloads/details.aspx?familyid=1D69CE13-E1E5-4315-825C-F14D33A303E9&displaylang=en. When installed, this package provides support for Visual Studio toolbox integration and IntelliSense support for the ASP.NET and Windows Forms Chart controls.

Once you've downloaded the Add-on package, double-click the MSChart_VisualStudioAddOn.exe file to start the installation process. Click Next to install the Add-on in your system. Once the installation is done, you'll see a screen like this one:

Figure 1: Microsoft Chart Controls Add-on: successful-update screen.

Now if you create a new web application project, you should be able to see the control in the Toolbox. If you cannot locate the chart control in the Toolbox window, right-click in the Toolbox window and select the option Choose Items. Doing so opens the Choose Toolbox Items dialog box.

Figure 2: Choose Toolbox Items dialog box.

Once done, you can see the charting control in the Toolbox, as shown below:

Figure 3: Chart control added to Toolbox list.

Getting Started

To get started with using the charting control, just drag and drop the control from the Toolbox onto your web form. Here's what the initial markup code would look like:

Now, specify the values for the Series and the DataPoints, as follows:

When you execute the chart, here's what the output looks like:

Figure 4: Sample chart generated using chart control

To help you get familiar with using the control, you can download the samples provided by Microsoft at http://code.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591. And you can join the chart controls forum here to get more information: http://social.msdn.microsoft.com/Forums/en-US/MSWinWebChart/threads/.

Joydip Kanjilal ([email protected]) is a Microsoft MVP in ASP.NET. He has more than 12 years of industry experience in IT with more than six years in Microsoft .NET and its related technologies.