Reader Level:

Drawing Line Chart in ASP.NET

By Steve Hall on Jan 18, 2002
This sample using GDI+ encapsulated in a class to display a primitive line chart.

Save the following code as an .ASPX web page on your .NET web server to try this sample using GDI+ encapsulated in a class to display a primitive line chart. The class features an arraylist to hold a dynamic number of chart points and utilizes transforms to simplify the plotting of worldview data points. Enhancements would add color options, multiple lines, other chart types, and printing.

<%@ Page Language="C#" %>

<%@ Import Namespace="System" %>

<%@ Import Namespace="System.Drawing" %>

<%@ Import Namespace="System.Drawing.Drawing2D" %>

<%@ Import Namespace="System.Drawing.Imaging" %>

<script language="C#" runat="server">

class LineChart


    //Sample ASPX C# LineChart Class

    public Bitmap b;

    public string Title="Default Title";

    public ArrayList chartValues = new ArrayList();

    public float Xorigin=0, Yorigin=0;

    public float ScaleX, ScaleY;

    public float Xdivs=2, Ydivs=2; 

    private int Width, Height;

    private Graphics g;

    private Page p;


    struct datapoint


        public float x;

        public float y;

        public bool valid;




    public LineChart(int myWidth, int myHeight, Page myPage)


        Width = myWidth; Height = myHeight;

        ScaleX = myWidth; ScaleY = myHeight;

        b = new Bitmap(myWidth, myHeight);

        g = Graphics.FromImage(b);

        p = myPage;



    public void AddValue(int x, int y)


        datapoint myPoint;







    public void Draw()


        int i;

        float x, y, x0, y0;

        string myLabel;

        Pen blackPen = new Pen(Color.Black,1);

        Brush blackBrush = new SolidBrush(Color.Black);

        Font axesFont = new Font("arial",10);


        //first establish working area




        int ChartInset = 50;

        int ChartWidth = Width-(2*ChartInset);

        int ChartHeight = Height-(2*ChartInset);

        g.DrawRectangle(new Pen(Color.Black,1),ChartInset,ChartInset,ChartWidth,ChartHeight);


        //must draw all text items before doing the rotate below

        g.DrawString(Title, new Font("arial",14), blackBrush, Width/3, 10);

        //draw X axis labels

        for(i=0; i<=Xdivs; i++)




            myLabel = (Xorigin + (ScaleX*i/Xdivs)).ToString();

            g.DrawString(myLabel, axesFont, blackBrush, x-4, y+10);

            g.DrawLine(blackPen, x, y+2, x, y-2);


        //draw Y axis labels

        for(i=0; i<=Ydivs; i++)




            myLabel = (Yorigin + (ScaleY*i/Ydivs)).ToString();

            g.DrawString(myLabel, axesFont, blackBrush, 5, y-6);

            g.DrawLine(blackPen, x+2, y, x-2, y);



        //transform drawing coords to lower-left (0,0)




        g.ScaleTransform(-1, 1);


        //draw chart data

        datapoint prevPoint = new datapoint();


        foreach(datapoint myPoint in chartValues)












            prevPoint = myPoint;



        //finally send graphics to browser

        b.Save(p.Response.OutputStream, ImageFormat.Jpeg);










void Page_Load(Object sender, EventArgs e)


    LineChart c = new LineChart(640, 480, Page);

    c.Title="My Line Chart";

    c.Xorigin=0; c.ScaleX=500; c.Xdivs=5;

    c.Yorigin=0; c.ScaleY=1000; c.Ydivs=5;








Article Extensions
Contents added by Awadhesh Singh on Oct 11, 2010





Custom Software Development
MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.

Trending up