The Microsoft ASP.NET Chart Control

We were looking high and low for an easy to implement and lightweight chart control for an on-going ASP.NET web application. We got down to working with  our best friend, the Google search to look up for the available options. There were many third party Chart Controls available and some were really fancy and good-looking. They were rather bulky and wore exorbitant price tags though, and the two factors made them look less attractive. After short listing, we finalized one of them thinking it was the best solution, though I wasn’t too keen on it since it lacked luster and sent information outside the application each time to generate charts. But it worked well, was free and better than most other alternatives we had come across. We tried the product, made a demo application and finalized it for use within our application. This was just, till the client questioned the free status of the product and for how long it would remain so.

That sent us scurrying back to Google search. My colleague, an eagle-eyed developer (who had suggested the other option as well) with an uncanny knack for Googling up the right stuff surprised us with an even better solution this time- the perfect chart control that we could use with complete ease! One look at the charts the Microsoft ASP.NET Chart Control could generate and I was an instant fan!

After a long drooling over the charts that the control sprang up (erm, yes), I got around having it set up to check its feasibility in the application. After a demo to the client and a clean chit from the developers, and it was clear that this was the chart control we were going to use in our application.

It’s unbelievable how effortlessly we can use the Microsoft ASP.NET server control (for free) with C# and ASP.NET 3.5 to enable rich browser-based charts. The control provides a useful addition to your standard ASP.NET toolkit of functionality, and enables you to easily add richer visualization and data workflow scenarios to your ASP.NET applications. The web chart supports many types of charts amongst which are Area, Bar, Column, Doughnut, Line, Pie, Radar and many more. And, they are very good looking. The best part is, it’s a .NET control so it makes sense to opt for it over the bulky third party tools.

Features supported

• Multiple chart types supported
• Data series, chart areas, axes, legends, labels, titles, and more
• Data binding
• Built-in data manipulation and formulas
• Comprehensive chart appearance, such as 3D, lighting, perspective, and more
• Events and customizations

System Requirements

Here is what you need is in order to use the Microsoft ASP.NET Chart Control on your PC:

• Windows 2000 Service Pack 4
• Windows Server 2003 Service Pack 2
• Windows Server 2008
• Windows Vista Service Pack 1
• Windows XP Service Pack 3

Adding the Control

To start using on the chart control on your system, install .NET framework 3.5 Service Pack 1 and then run the Microsoft ASP.NET Charting Control set up. You will find that the control is added to your toolbox and ready to use.

When deploying the application, install .NET framework 3.5 Service Pack 1 and add the System.Web.DataVisualization.dll to your application’s bin folder on the server.

Plotting a chart

The ASP.NET Chart Control comes with a lot of help making it easy for the developers to implement it
An easy example to show how to plot a simple chart using the ASP.NET Chart Control:

Step-1: Add a chart control:

<asp:Chart ID=”MyFirstChart” runat=”server>
</asp:Chart>

Step-2: Add the chart area, the region for the chart

<ChartAreas>
<asp:ChartArea Name=”ChartArea1″>
<AxisX LineColor=”64,4,64,64″>
<MajorGrid Enabled=”false” />
<LabelStyle Font=”12pt” />
</AxisX>
<AxisY LineColor=”Beige”>
<MajorGrid Enabled=”false” />
<LabelStyle Font=”12pt” />
</AxisY>
</asp:ChartArea>
</ChartAreas>

Step-3: Add the series for which the chart is to be plotted

<Series>
<asp:Series Name=”Year” ChartType=”Column”
ChartArea=”ChartArea1″>
<Points>
<asp:DataPoint XValue=”2009″ YValues=”30,40″ />
<asp:DataPoint XValue=”2008″ YValues=”25,35″ />
<asp:DataPoint XValue=”2007″ YValues=”20,30″ />
</Points>
</asp:Series>
</Series>

This will create a simple column chart. Here’s a view:

To specify the legend, title, color of the chart, marked points try this:

<asp:Chart ID=”MyChart” runat=”server”>
<Legends>
<asp:Legend Title=”My First Chart” Docking=”Bottom”
Name=”Year”></asp:Legend>
</Legends>
<Titles>
<asp:Title Text=”Progress in the various Years”></asp:Title>
</Titles>
<Series>
<asp:Series Name=”Year” ChartType=”Line”
ChartArea=”ChartArea1″ Color=”Brown” MarkerStyle=”Circle”>
<Points>
<asp:DataPoint XValue=”2009″ YValues=”30,40″ />
<asp:DataPoint XValue=”2008″ YValues=”25,35″ />
<asp:DataPoint XValue=”2007″ YValues=”20,30″ />
</Points>
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name=”ChartArea1″>
<AxisX>
<MajorGrid Enabled=”false” />
</AxisX>
<AxisY>
<MajorGrid Enabled=”false” />
</AxisY>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

which will create a chart that looks like this:

I took a simple example for you to try out. There is much more you can do by exploring all its features like- selecting from the rich and varied assortment of charts, setting palettes, adding 3-D effects, data binding and so on. All the charts are derived from a base class called Chart, and you can create your own charts by inheriting from this class and overriding the render method. And, its very easy.

The charts are very flexible as we can change their look to suit our needs. So if your application needs graphical reporting and representation of massive numeric data, give the super cool Microsoft ASP.NET Chart Control a try. I’m sure you will be smitten by the wonderful things this control can do and become a fan like I am.

Reference:
Scott Guthrie’s Blog on Microsoft ASP.NET Chart Control