Click here to Skip to main content
15,860,972 members
Articles / Web Development / ASP.NET
Article

Dynamic Graph and Chart Generator

Rate me:
Please Sign up or sign in to vote.
4.60/5 (22 votes)
20 Jul 20062 min read 146.3K   2K   61   6
Create any 2-D graph, chart, or graphics without any code.

Image 1

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.

Image 2

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:

HTML
<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:

C#
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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Israel Israel
Jazz Drummer (1½/2½/3.5++), Writer, Grandfather, Possibly World's Oldest Web Developer, Rebel, Anti-globalization, Prisoner of conscience

Comments and Discussions

 
GeneralWamp Server installation Pin
akvenkateshkumar6-Jan-10 0:03
akvenkateshkumar6-Jan-10 0:03 
GeneralPlease Share The Code which is Database dependet sql 2000 Pin
RAKESH gaur mkcl9-Jan-09 0:19
RAKESH gaur mkcl9-Jan-09 0:19 
GeneralASP.Net Reports Pin
mish3-Sep-08 1:53
mish3-Sep-08 1:53 
QuestionCan't see an image. Pin
Member 86690213-Dec-07 7:01
Member 86690213-Dec-07 7:01 
GeneralSome notes... [modified] Pin
HeavensDoor21-Jul-06 0:29
HeavensDoor21-Jul-06 0:29 
Generalelegant Pin
Al Augustinas19-Jul-06 2:47
Al Augustinas19-Jul-06 2:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.