[tweetmeme style=”compact”]Back in the days of ASP, web developers had to rely on third party components to dynamically create images on a web page. In ASP, we would use colored tables to display a bar graph. But wouldn’t it be great if we could generate a dynamic graph by ourselves instead of relying on some third-party components. Well, the .NET framework allows us to do just that and more.

Consider a scenario where we had to display a graph representing the sales of a company from say 2000-2004. We need to generate a dynamic bar graph using the data provided to us. Let me take you through the step-by-step process to accomplish the task.

I am using Notepad and .NET framework 1.0. Why notepad? Well, I believe it’s the best way to learn .NET or for that matter any programming language and also the code is very clean.

The two classes, which we need to generate images on the fly, are System.Drawing.Bitmap and System.Drawing.Graphics. The Bitmap class is used to represent an instance of an image and the Graphics class can be used to draw lines, curves and other geometric shapes.

graphTitle : The title of the graphxValues : The values in the x-axisyValues : The values in the y-axisbarWidth : The width of each barbarSpaceWidth : The space between each barsgraphHeight : The height of the graph(excluding the title and x-values)

Change the GenerateBarGraph method as follows

protected void GenerateBarGraph(
string graphTitle,
ArrayList xValues,
ArrayList yValues,
int barWidth,
int barSpaceWidth,
int graphHeight)
{
int graphTitleHeight=20; // Height in pixels utilized by the title in the graph
int itemsHeight=35; // Height in pixels utilized by the items in the x-axis
/*
The Graph’s width is calculated by adding the width of a bar and the space between
two bars multiplied by the total values in the x-axis plus the space between two bars
*/
int graphWidth= (barWidth + barSpaceWidth) * xValues.Count + barSpaceWidth;
/*
The maximum height that a bar can attain needs to be found from the y-values passed
as parameter
*/
int maxBarHeight=0;
//Total height of the image is calculated
int totalGraphHeight = graphHeight + graphTitleHeight + itemsHeight;
//Create an instance of Bitmap class with the given width and height
Bitmap barBitmap=new Bitmap(graphWidth, totalGraphHeight);
/*
Graphics class does not have a constructor and hence we call its static method
FromImage and pass the Bitmap object to it
*/
Graphics barGraphics= Graphics.FromImage(barBitmap);
/*
Using the Graphics object we fill the image of given dimensions with light gray color
*/
barGraphics.FillRectangle(
new SolidBrush(Color.WhiteSmoke),
0,
0,
graphWidth,
totalGraphHeight);
/*
We create an instance of Font class available in System.Drawing. We will be using this
to display the title of the graph.
*/
Font titleFont=new Font("Verdana",14, FontStyle.Bold);
/*
Use the Graphics object’s DrawString method to draw the title at the specified location
*/
barGraphics.DrawString(
graphTitle,
titleFont,
new SolidBrush(Color.Red),
(graphWidth / 2) - graphTitle.Length * 5,
totalGraphHeight - itemsHeight);
//////////////Code to generate bars will come here/////////////////
/*
Save the image to the web server’s D: drive. We use the PNG format to make it look
crisp.
*/
barBitmap.Save("D:\\bargraph.png",ImageFormat.Png);
//Dispose off the Graphics and Bitmap objects
barGraphics.Dispose();
barBitmap.Dispose();
}

Now, if you run this page you will see an image displayed on the browser with the title “ABC Ltd. Sales (2000-2004)” displayed in red at the bottom

If you notice in the Page_Load method, we have passed two ArrayLists to the GenerateBarGraph method and also the other previously mentioned parameters. We will be using these two ArrayLists to display the bars.

Now replace //////////////Code to generate bars will come here///////////////// in GenerateBarGraph method with the following code.