How to create Line Graph and Bar graph on same parameters in asp.net

We can use GDI+ to draw chart components in C# or VB.NET language in memory and once the components are drawn in memory, we can save the drawing in an image on the Web server. Once the image is saved, we can display this image in an ASP.NET page using any Image tag or image control.

The Bitmap class available in GDI+ is used to create an image and the Graphics class in GDI+ is used to draw graphics components such as a line or a rectangle.

The following method takes some parameters and generates a chart based on the values passed in the method.

protectedvoid GenerateGraph(string graphTitle, ArrayList xValues, int[] points, int barWidth, int barSpaceWidth, int graphHeight)
    {
ArrayList _years = newArrayList();
        _years.Add("2000");
        _years.Add("2001");
        _years.Add("2002");
        _years.Add("2003");
        _years.Add("2004");

int[] p = newint[] { 10, 12, 48, 102, 290, 15, 100, 25, 300, 200, 150, 200, 60, 40, 250 };
int[] k = newint[p.Length];
Array.Copy(p, k, p.Length);
Array.Sort(k);    

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 passedas 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 = newBitmap(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(newSolidBrush(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 = newFont("Verdana", 14, FontStyle.Bold);
/*Use the Graphics object's DrawString method to draw the title at the specified location*/
        barGraphics.DrawString(graphTitle, titleFont, newSolidBrush(Color.Red), (graphWidth / 2) - graphTitle.Length * 5, totalGraphHeight - itemsHeight);

//////////////Code to generate bars will come here/////////////////
/*Find the highest value in the yValues ArrayList and set it as the maximum height of the bar*/
foreach (int _value in p)
if (_value > maxBarHeight) maxBarHeight = _value;

//barXPos will store the x position of a bar
int barXPos = barSpaceWidth;
int barHeight;

Font itemsFont = newFont("Verdana", 9, FontStyle.Bold);
Font valuesFont = newFont("Verdana", 7, FontStyle.Italic);

Random rnd = newRandom();

for (int i = 0; i < xValues.Count; i++)
        {
//Generate a random color so that each bar will have a unique color
//Color color = Color.FromArgb(rnd.Next(255), rnd.Next(255), rnd.Next(255));
Color color = Color.FromArgb(250, 200, 200);
SolidBrush barBrush = newSolidBrush(color);

/*
            (int)yValues[i]* 100 / maxBarHeight -> Gives the bar height in percentage with respect to
            the maximum bar height set by us

            ((((int)yValues[i]* 100 / maxBarHeight) )* graphHeight)/100 will give the bar height in
            pixels
            */
            barHeight = ((((int)p[i] * 100 / maxBarHeight)) * graphHeight) / 100;

//Draw the bar with the set brush, x and y positions, width and height
            barGraphics.FillRectangle(barBrush, barXPos, graphHeight - barHeight, barWidth, barHeight);

//Draw the x-value along the x-axis
            barGraphics.DrawString(xValues[i].ToString(), itemsFont, barBrush, barXPos, graphHeight);

//Draw the respective y value on top of the bar
            barGraphics.DrawString(p[i].ToString(), valuesFont, barBrush, barXPos, (graphHeight - barHeight) - itemsHeight
;
//Change the x position of the next bar
            barXPos += (barWidth + barSpaceWidth);
        }
///////////For Line Chart ///////////////
// InitializeGraph();
//Offset (Margin) Values
int bottomOffset = 55;
int topOffset = 30;
int leftOffset = 25;
int rightOffset = 30;

// Taking care of some bookwork (declaring/initializing variables)
int maxDataPoints = p.Length;
//    int chartHeight = bmp.Height - bottomOffset;
//    int chartWidth = bmp.Width - rightOffset;

// int maxDataPoints = _years.Count;// points.Length;
int chartHeight = barBitmap.Height - bottomOffset;
int chartWidth = barBitmap.Width - rightOffset;

// Adjustable Values
int maxValue = k[k.Length - 1];
int minValue=k[0];

double adjustedMax = maxValue * .10 + maxValue;
double adjustedMin = minValue - .50 * minValue;
double adjustVerticalRatio = (chartHeight - topOffset) / adjustedMax;    
double adjustHorizontalRatio = ((chartWidth - leftOffset) / (maxDataPoints - 1));

Pen chartPen = newPen(Color.Orange, 3);
Pen gridLine = newPen(Color.LightGray, 1);

int minYpos = chartHeight - topOffset;
int maxYpos = 10;

// Drawing the Lines
for (int i = 0; i < maxDataPoints - 1; i++)
        {
//double adjustVerticalRatio = (chartHeight - p[i]) / adjustedMax;
int xPos = Convert.ToInt32(i * adjustHorizontalRatio) + leftOffset;
//int xPos = Convert.ToInt32(i * adjustHorizontalRatio) +p[i];
int xPos2 = Convert.ToInt32((i + 1) * adjustHorizontalRatio) + leftOffset;
//int xPos2 = Convert.ToInt32((i + 1) * adjustHorizontalRatio) + p[i];

int yPos = Convert.ToInt32(chartHeight - adjustVerticalRatio * p[i]);
int yPos2 = Convert.ToInt32(chartHeight - adjustVerticalRatio * p[i + 1]);

if (p[i] == minValue)
            {
 
                minYpos = yPos;
             }

if (p[i] == maxValue)
            {
 
                maxYpos = yPos;
 
            }

// barGraphics.DrawLine(gridLine, new Point(xPos2, topOffset), new Point(xPos2, chartHeight));
            barGraphics.DrawLine(chartPen, newPoint(xPos, yPos), newPoint(xPos2, yPos2));

//barGraphics.DrawString(i.ToString(), new Font("Arial", 8), new SolidBrush(Color.Gray), new Point(xPos - 4, chartHeight + 10));

        }
////Drawing X-Axis line.

//barGraphics.DrawLine(new Pen(new SolidBrush(Color.Black), 2), 100, Height - 100, Width - 100, Height - 100);

////Drawing Y-Axis line.

//barGraphics.DrawLine(new Pen(new SolidBrush(Color.Black), 2), 100, Height - 100, 100, 10);

////Plotting Origin(0,0).

//barGraphics.DrawString("0", new Font("Courier New", 10), new SolidBrush(Color.White), 100, Height - 90);

//Draw Border Lines
Pen borderLine = newPen(Color.DarkGray, 1);

//Left Border
        barGraphics.DrawLine(borderLine, newPoint(leftOffset, chartHeight), newPoint(leftOffset, topOffset));

//Bottom Border
        barGraphics.DrawLine(borderLine, newPoint(leftOffset, chartHeight), newPoint(chartWidth, chartHeight));

//Right Border
// barGraphics.DrawLine(borderLine, new Point(chartWidth, chartHeight), new Point(chartWidth, topOffset));

//Top Border
// barGraphics.DrawLine(borderLine, new Point(leftOffset, topOffset), new Point(chartWidth, topOffset));

//Drawing Vertical Min/Max Values
//barGraphics.DrawString(maxValue.ToString(), new Font("Arial", 8), new SolidBrush(Color.Gray), new Point(leftOffset - 25, maxYpos));
//barGraphics.DrawString(minValue.ToString(), new Font("Arial", 8), new SolidBrush(Color.Gray), new Point(leftOffset - 25, minYpos));
//barGraphics.DrawLine(gridLine, new Point(leftOffset - 25, minYpos), new Point(chartWidth, minYpos));
// barGraphics.DrawLine(gridLine, new Point(leftOffset - 25, maxYpos), new Point(chartWidth, maxYpos));

string strpath = "C:\\Documents and Settings\\Anupama.Singh\\My Documents\\Visual Studio 2008\\WebSites\\WebSite2\\Images\\Chart.jpg";
        barBitmap.Save(strpath, ImageFormat.Jpeg);
GC.Collect();

        }