Dynamic Graph and Chart Generator

• Download source files - 18.6 Kb

Bar Chart

Introduction

GraphsAndCharts is a completely dynamic Graphs and Chart Generator which generates images on-the-fly. Graphs and charts are created without any code, using the SRC attribute in an <IMG> tag! Graphs and charts can be replaced on-the-fly without uploading the Web page. By just adding the code available here to an application, graphs can be implemented. You need not write any code yourself.

Note: This is open code, and more graphics objects can be added with more features.

This code can be used to create:

• Graphs in many styles
• Charts e.g.: pie charts, bar charts, etc.
• Graphics objects such as lines, ellipses, rectangles, circles, etc.

Pie Chart

Purpose of GraphsAndCharts

The purpose of GraphsAndCharts is to enable quick creation of 2-D charts and graphics object without code.

Uses of GraphsAndCharts

• Visual summary of data
• Statistical data representation
• Mathematical data representation
• Reports

Using the code

Unzip and open the code in ASP.NET 2.0 as a web site. Run the code from the default.htm page.

How it works

1. One of the unknown secrets of HTML is that <IMG> tags can address non-images.
2. With .NET, a special page called a handler with the .ashx extension is used to create images (here, DrawIt.ashx).
3. In the .ashx page, the parameters of the image request are parsed.
4. The .ashx page calls the DrawAll class to create the bitmap image in memory.
5. The bitmap image in memory is output to the <IMG> tag as a binary stream.

Example with the <IMG> tag to create a pie chart:

<IMG SRC=ashx/DrawIt.ashx?width=250&height=250&xaxis=pushes
         &yaxis=pulls&background=powderblue&piechart=20,30,10,10,5;
         &titles=kings,queens,rooks,pawns,knights,castles;&>

The example shows the parameters used by the DrawIt.ashx handler:

width=250
height=250
xaxis=pushes
yaxis=pulls
background=powderblue
piechart=20,30,10,10,5;
titles=kings,queens,rooks,pawns,knights,castles;

Explanation

1. The <IMG> tag calls the handler DrawIt.ashx.
2. DrawIt.ashx reads the request parameters and parses them.
3. According to the request parameters, DrawIt.ashx calls the class DrawAll to create the graphics object.
4. The functions in DrawAll.cs create the relevant graphics object and return a bitmap in memory.
5. DrawIt.ashx outputs a binary stream to the image tag

Code snippets

Shown here is the drawBarChart function in the DrawAll class:

public Bitmap drawBarChart (Bitmap aoBmp, Rectangle aoRect, int aintWidth, 
       int aintHeight, string astrBackground, string astrCaption, 
       string astrXaxis, string astrYaxis, int[] aintV, string[] astrTitles)
{
   Single[]  sngY      = new Single[aintV.Length];
   float     flTotal;
   Single    sngMax;
   int       ii, intUpb, intBarWidth, intLegendHeight, 
             intSpace, intTopOffset, intTop;
   Graphics oGraphic;
   Font     oFont;

   oGraphic     = Graphics.FromImage(aoBmp);
   oFont        = new Font("Small Fonts", 7);
   intTopOffset = (astrCaption == "") ? 4 : 20;

   oGraphic.FillRectangle(brushGet(astrBackground), 0, 0, aoRect.Left + 
                          aintWidth + aoRect.Width, aoRect.Top + 
                          aintHeight + aoRect.Bottom);

   // Draw axes
   // Note: Y-Axis begins at top !!
   oGraphic.DrawLine(penGet("black", 1), new Point(aoRect.Left, 
                     aoRect.Top + aintHeight - aoRect.Height), 
                     new Point(aoRect.Left + aintWidth, 
                     aoRect.Top + aintHeight - aoRect.Height));
   oGraphic.DrawLine(penGet("black", 1), new Point(aoRect.Left, 
                     aoRect.Top + aintHeight - aoRect.Height), 
                     new Point(aoRect.Left, aoRect.Top + 0));

   // Write Headers
   writeHeaders(aoRect, oGraphic, astrXaxis, 
                astrYaxis, astrCaption, aintWidth, aintHeight);

   intUpb          = aintV.Length;
   intSpace        = 10;
   intBarWidth     = (int) ((aintWidth/intUpb) - intSpace);
   intLegendHeight = (int) ((aintHeight/intUpb) - 5);

   // Set Upper Y value
   sngMax  = 1;
   flTotal = 0;
   for (ii=0;ii<intUpb;ii++)
   {
    sngMax = (aintV[ii] > sngMax) ? aintV[ii] : sngMax;
    flTotal += aintV[ii];
   }
   for (ii=0;ii<intUpb;ii++)
       {sngY[ii] = (aintV[ii] / sngMax) * (aintHeight - 10);}
       // Set Proportional Y values

   // Draw Bars
   for (ii=0;ii<intUpb;ii++)
       {oGraphic.FillRectangle(brushGet(colorName(ii + 7)), 
                 aoRect.Left + intSpace + 
                 (intSpace + intBarWidth) * ii, 
                 aoRect.Top - intTopOffset + 
                 aintHeight - sngY[ii], intBarWidth, sngY[ii]);}

   // Draw Legend
   writeLegend(aoRect, oGraphic, astrCaption, 
               astrTitles, aintV, aintWidth, flTotal);

   return aoBmp;
}

History

This is the first version of the code. Any update changes will be listed here.