Give Your Data a 'Visible' Identity

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 ''

section:

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 ''

section and '' section for use with IIS and Visual Studio Web

Development Server.

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.

Width="400">

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 ' 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 ''from drop down window in

front of 'Choose Data source' and define data source i.e. SQL database.