Give Your Data a 'Visible' Identity

Microsoft's Chart control for ASP.NET enables developers to add attractive visualization to data in their web applications

Monday, June 01, 2009

Print

Comment

Email

Digg

Del.icio.us

Reddit

Twitter

Information in the form of data is very critical for any organization and for future business planning, analysis of data is important. The best way to analyze huge amounts of data is by using different charts. Suppose you are in the business of manufacturing two different products and you want to know about the sales trend of previous years so that you can focus on manufacturing of a single product instead of two in future. The best way for analysis in this case could be using a neat Line Chart. A single view of lines in such a chart would be enough to understand sales trends, which in turn will help you make quick and timely decisions. Yet another example can be a product website that compares sales of products of leading brands for customers, at the click of a button.

Implementation
To use the Chart control one needs to have Service Pack 1 installed both for .NET Framework and Visual Studio 2008. To start implementation download and install Microsoft's Chart Controls ('MSChart.exe') from tinyurl.com/5lqhes . One can also install Visual studio 2008 tool support by downloading and installing 'MSChart_VisualStudioAddOn.exe' from tinyurl.com/6b5qya. This will provide intelliSence support while designing and will also give 'Toolbox' integration. Once you have installed both these tools, you are ready to create ASP.NET web application. Start with creating a new ASP.NET project ('TestCHART'). In this implementation we are using C# as the programming language. Now drag and drop 'Chart' control in 'Toolbox' under 'Data' on 'Default.aspx' (in design view). When one places a chart into the Web forms designer, a new entry is placed 'web.config' file under '<controls>' section:

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

This entry allows one to use the chart control with the familiar asp tag prefix. Visual Studio also adds HTTP handler entry shown below into '<handlers>' section and '<httpHandlers>' section for use with IIS and Visual Studio Web Development Server.

<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

There are two ways of creating charts using ASP.NET charting control: at design time or at run time, creating charts at run time makes more sense as interface and logic are separated. In this implementation we would be creating a Bar Chart at design time and Line chart at run time. To add Bar Chart add following code to 'Default.aspx':

Here is the output of sample implementation, Bar Chart was created on design time while Line Chart was create on run time.

<asp:Chart ID="Chart1" runat="server" Height="300" Width="400">
<Series>
<asp:Series BorderColor="180, 26, 59, 105">
<Points>
<asp:DataPoint YValues="45" />
<asp:DataPoint YValues="34" />
<asp:DataPoint YValues="67" />
</Points>
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea />
</ChartAreas>
</asp:Chart>

Every chart has a number of elements, all these elements are available via Chart control. The above code shows some basic elements of chart control, every chart has atleast one 'Series' object populated with data. 'ChartType' property of series determines the type of chart i.e Line, Bar etc. 'ChartArea' is a rectangular area used to draw series, labels, axes, grid lines, etc. On the other hand to create Line Chart on run time, add the following code to 'Default.aspx.cs':

To bind data present in SQL data base or other data source to chart using Data Source Configuration Wizard, just select '<New data source...>

using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;
namespace TestCHART
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

Series series = new Series("Spline");
series.ChartType = SeriesChartType.Spline;
series.BorderWidth = 3;
series.ShadowOffset = 2;
series.Points.AddY(60);
series.Points.AddY(90);
series.Points.AddY(20);
Chart1.Series.Add(series);
}
}
}

The co-ordinate system of chart control is a relative means for chart objects to remain relative to each other when chart is resized, thus making the positioning easier. Origin of coordinate system is in the upper left corner with X axis pointing right, Y axis pointing down, and Z axis (for 3D charts) pointing outwards. Besides the chart implemented in this article there are plenty of other chart types available, one can also bind data to chart using Data Source Configuration Wizard, just select '<New data source...>'from drop down window in front of 'Choose Data source' and define data source i.e. SQL database.

Page(s)   1