Click here to Skip to main content
14,209,246 members
Click here to Skip to main content
Posted 18 Jul 2006


61 bookmarked

Dynamic Graph and Chart Generator

Rate this:
4.60 (22 votes)
Please Sign up or sign in to vote.
4.60 (22 votes)
20 Jul 2006        
Create any 2-D graph, chart, or graphics without any code.

Bar Chart


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



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



  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;


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


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


About the Author

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
memberakvenkateshkumar6-Jan-10 0:03 
GeneralPlease Share The Code which is Database dependet sql 2000 Pin
RAKESH gaur mkcl9-Jan-09 0:19
memberRAKESH gaur mkcl9-Jan-09 0:19 
GeneralASP.Net Reports Pin
mish3-Sep-08 1:53
membermish3-Sep-08 1:53 
I am new to ASP.NET 2.0 And I need to generate graphs and reports from the database,I am using sql server 2005 for the database.Can anyone please tell me how to go about creating these graphs.

Thank you in Advace.
QuestionCan't see an image. Pin
Member 86690213-Dec-07 7:01
memberMember 86690213-Dec-07 7:01 
GeneralSome notes... [modified] Pin
HeavensDoor21-Jul-06 0:29
memberHeavensDoor21-Jul-06 0:29 
Generalelegant Pin
Al Augustinas19-Jul-06 2:47
memberAl 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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190617.3 | Last Updated 20 Jul 2006
Article Copyright 2006 by avronp
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid