A HTML Table based Chart control in ASP.NET\MOSS 2007

Content:

• Introduction
• Various options to display charts on web
• Code Walkthrough
• Advantages
• Limitation

Introduction:
A chart is a visual representation of data represented in various code\colors. It represents the summary of large chunk of unorganized data in an easy to understand manner which becomes very helpful in analysis, decision making and trend setting. The extensive usage of data over the web makes it very important control nowadays. Most of the modern web2.0 websites uses charts as one of the techniques to convey data to site visitors.
The article below gives a summary to create a 3d column charts in asp.net which can be modified and used in various other web supported platforms

Various options to display charts on web
Following are options to use chart on web in .net plateform
• Microsoft chart controls:
Microsoft recently launched the rich functionality chart controls for asp.net to work with .net framework 3.5. It can be downloaded from the link below and used as any other controls in asp.net
http://www.microsoft.com/downloads/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C
These chart controls will be part of visual studio 2010 release.

• GDI+ charts:

GDI+ charts are traditionally used chart controls over the web. It uses various drawing API of com\.net to draw a picture at server end first and then transfer the picture on the web. These controls are very complex and resources consuming.

Creating 3d and nice look and feel also bit cumbersome

• HTML Table based Charts:

The technique used below is to generate line charts with the help of html tables and 3d images. It draws the table calibrate a 3d image to fit in the row as per the given x\y axis value. Hence become very lightweight and supported on any .net framework\ other platforms. Below is the sample screen shot.

Code Walkthrough: There are mainly two code files in this project. A chart user control and a web page to host\call chart
Chart controls expose various properties to set the different parameters of chart like width, column height, y axis values, x axis values etc. DrawGraph() is called to draw chart based on the x axis and y axis values set in the properties. It normalize the values provides for x axis and resize it as per the chart width. Below are the algorithm steps.

• Define the color image array to denote the x axis values
• Find out the max value in the x axis collection
• Get the mod by dividing chart width with max value
• Draw a table and draw a row for each value
• For each value in the collection multiply the mod with value to expand and divide chart width with standard param to contract
• Set this value as the length of image
• Repeat the colors if color array is less than the value specified
• Emit the constructed html on div\label tag

 Advantages:

• It really simple, lightweight, 3d bar chart with nice look and feel
• The code\logic can be modified to work on any other platform\language
• A html table base web chart renders well on all type of browsers
• It can be used in any .net framework\SharePoint
• Can be customized easily based on the requirements

Limitation:

• Can’t use similar technique to draw pie charts

code available on request