Advertisment

How to create data charts in ASP.NET 3.5?

author-image
CIOL Bureau
Updated On
New Update

BANGALORE, INDIA: 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.

Advertisment

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.
Advertisment

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.

Advertisment

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.

tech-news