Create Dynamic Data Charts in ASP.NET 3.5

A picture is worth a thousand words' is a well known saying. When applied to

large amounts of data this becomes especially true. This is why a lot of data is

shown in a summry view in different sorts of graphs. However, till now if you

wanted to show a graph in your application written in .NET, you had to either

write your own code for it or rely on expensive third party products.

Microsoft has finally released a new set of Chart controls for .NET. You can

use these controls in both Windows and Web forms and are available for free for

download and use. All you need to do is download the Chart Controls for .NET,

the Chart Control Add-on for Visual Studio and install them. You need to have

.NET Framework 3.5 SP1 and Visual Studio 2008 SP1 beforehand. This article shows

you how to create charts in your ASP.NET Web application using these new

controls once you have installed them. Open Visual Studio 2008 and create a new

ASP.NET Web site. Make sure that you are creating a .NET 3.5 application —

anything lower and the Chart control will not appear in the toolbox.

To start with, we'll look at a very simple example first. Open the

Default.aspx page in design view and open the the Toolbox. Under the Data

category you will now see a control called “Chart”. Drag and drop this into the

page. The control shows up as a simple Column chart in its default view. We now

need to bind this chart to the data and assign the data points for it. For doing

this, select the Chart control and click the Choose Data Source: New Data Source

option. Select Database and select say the Northwind database. Select the

Products table with the fields ProductName, UnitPrice & UnitsinStock where

UnitsinStock > 115.

Customization options for charts allow you to change the way they are presented to the user.

You can easily convert the chart to type to a 3D pie.

Once the SQLDataSource Wizard is complete, select the Chart again and open

its' Series property. Select the Series 1 entry on the left pane and scroll to

the XValueMembers and YValueMembers and set them to ProductName and UnitPrice

respectively. Save the settings and the page and run the application. You will

now see the data shown in a column graph in the Web page.

There are a whole ton of customizations that you can perform on this type of

graph itself. For instance you can select whether the image is created on stored

on the server and in which format (jpg, png, etc.) or should be sent directly to

the client as a binary stream. You can also select from many different palettes

(color styles) as well as display themes such as cylindrical, 3D, gradient and

more. Of course you can go ahead and add textual information such as titles, X

and Y names, value labels and legends if you so desire as well.

You can add multiple series to the graph as well. Again, open the Series

property and add a new series. This time select the YVAlueMembers to

UnitsInStock. Make sure to rename both the series to using their Name property

to something more descriptive. Back in the Chart control properties, add a new

Legend and run the page to see the multiple series. You will see a number of

different columns this time. Note that each column type can have a completely

different look and feel if you so wish.

Each series in a chart can be customized in the Series Collection Editor.

But column charts are not the only type of charts that you can create. You

can also create column, pie, doughnut, scatter, line, area, pyramid, stock and

more. Simply select the chart type in the series property and change its

settings.

As you can see, the number of of chart types and their customization options

give you a large number of choices in getting your application to look more

graphical while giving your users the data they want in a easy to understand

manner. Go to MSDN and download the controls for free to get started.