Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / multimedia / GDI+

Creating Web Graphics Dynamically / On The Fly

2.60/5 (3 votes)
7 Aug 2007CPOL 1   119  
Creating web graphics dynamically / on the fly.

Screenshot - GraphicsOnTheFly.jpg

Introduction

This will show how to create graphics on the fly which can be used for reports, verification, etc.

Using the code

The code is very simple, and it uses:

  1. System.Drawing
  2. System.Drawing.Imaging

Here is how it looks like:

C#
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Drawing.Imaging;

public partial class _Default : System.Web.UI.Page 
{

    protected void Submit_Click(object sender, EventArgs e)
    {
        //Creating Blank Bitmap Object with the following dimensions
        Bitmap oBitmap = new Bitmap(100, 150);

        Graphics oGraphic = Graphics.FromImage(oBitmap);

        //Creates Brushes and Pens just
        SolidBrush rBrush = new SolidBrush(Color.Red);
        SolidBrush bBrush = new SolidBrush(Color.Blue);
        SolidBrush gBrush = new SolidBrush(Color.Green);
        SolidBrush wBrush = new SolidBrush(Color.White);
        Pen bPen = new Pen(Color.Black, 4);
        Pen rPen = new Pen(Color.Red, 2);

        //We need to fill up the Image with white since by default it is Black
        oGraphic.FillRectangle(wBrush, 0, 0, 100, 150);

        //Just Draw a line for the graph
        oGraphic.DrawLine(bPen, new Point(3, 100), new Point(100, 100));
        oGraphic.DrawLine(bPen, new Point(5, 0), new Point(5, 100));

        //Rendering of Letters in their position
        Render_T(10, 110, rPen, oGraphic);
        Render_E(32, 110, rPen, oGraphic);
        Render_S(54, 110, rPen, oGraphic);
        Render_T(76, 110, rPen, oGraphic);

        float fHighestValue;
        float fHeight1;
        float fHeight2;
        float fHeight3;
        float fValue1;
        float fValue2;
        float fValue3;

        //Get The values of each bar
        fValue1 = Convert.ToSingle(Request["Value1"]);
        fValue2 = Convert.ToSingle(Request["Value2"]);
        fValue3 = Convert.ToSingle(Request["Value3"]);

    
        //Determining which is the largest number on the Graph
        if (fValue1 > fValue2)
        {fHighestValue = fValue1;}
        else
        {fHighestValue = fValue2;}
        if (fValue3 > fHighestValue)
        {fHighestValue = fValue3;}
        if (fHighestValue == 0) fHighestValue = 1;

        fHeight1 = (fValue1 / fHighestValue) * 100;
        fHeight2 = (fValue2 / fHighestValue) * 100;
        fHeight3 = (fValue3 / fHighestValue) * 100;

        //rendering the Graph
        oGraphic.FillRectangle(rBrush, 10, 100 - fHeight1, 20, fHeight1);
        oGraphic.FillRectangle(bBrush, 40, 100 - fHeight2, 20, fHeight2);
        oGraphic.FillRectangle(gBrush, 70, 100 - fHeight3, 20, fHeight3);

        //rendering the whole image
        Response.ContentType = "image/jpeg";
        oBitmap.Save(Response.OutputStream, ImageFormat.Jpeg);
    }

    private void Render_T(int XAxis, int YAxis, Pen oPen, Graphics oGraphic)
    {
        oGraphic.DrawLine(oPen, new Point(0 + XAxis, 0 + YAxis), 
                          new Point(20 + XAxis, 0 + YAxis));
        oGraphic.DrawLine(oPen, new Point(10 + XAxis, 0 + YAxis), 
                          new Point(10 + XAxis, 22 + YAxis));
    }

    private void Render_E(int XAxis, int YAxis, Pen oPen, Graphics oGraphic)
    {
        oGraphic.DrawLine(oPen, new Point(0 + XAxis, 0 + YAxis), 
                          new Point(20 + XAxis, 0 + YAxis));
        oGraphic.DrawLine(oPen, new Point(0 + XAxis, 10 + YAxis), 
                          new Point(20 + XAxis, 10 + YAxis));
        oGraphic.DrawLine(oPen, new Point(0 + XAxis, 20 + YAxis), 
                          new Point(20 + XAxis, 20 + YAxis));
        oGraphic.DrawLine(oPen, new Point(1 + XAxis, 0 + YAxis), 
                          new Point(1 + XAxis, 20 + YAxis));
    }

    private void Render_S(int XAxis, int YAxis, Pen oPen, Graphics oGraphic)
    {
        oGraphic.DrawLine(oPen, new Point(0 + XAxis, 0 + YAxis), 
                          new Point(20 + XAxis, 0 + YAxis));
        oGraphic.DrawLine(oPen, new Point(0 + XAxis, 10 + YAxis), 
                          new Point(20 + XAxis, 10 + YAxis));
        oGraphic.DrawLine(oPen, new Point(0 + XAxis, 20 + YAxis), 
                          new Point(20 + XAxis, 20 + YAxis));
        oGraphic.DrawLine(oPen, new Point(1 + XAxis, 0 + YAxis), 
                          new Point(1 + XAxis, 10 + YAxis));
        oGraphic.DrawLine(oPen, new Point(19 + XAxis, 10 + YAxis), 
                          new Point(19 + XAxis, 20 + YAxis));
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)