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.
Direct Hit! |
Applies To: .NET developers |
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.