Blue Theme Orange Theme Green Theme Red Theme
 
ANTS Performance Profiler 6.0
Home | Forums | Videos | Photos | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
ASP.Net 4 Hosting is here
 Resources  
Close
 Our Network  
Close
Search :       Advanced Search »
Home » GDI+ & Graphics » Drawing Line Chart in ASP.NET

Drawing Line Chart in ASP.NET


This sample using GDI+ encapsulated in a class to display a primitive line chart.

Total page views :  53246
Total downloads :  1225
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
Download Files:
DrawLineChartCode.zip
 
Become a Sponsor

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;

    }

 

    //initialize

    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;

        myPoint.x=x;

        myPoint.y=y;

        myPoint.valid=true;

        chartValues.Add(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

        p.Response.ContentType="image/jpeg";

        g.FillRectangle(new

        SolidBrush(Color.LightYellow),0,0,Width,Height);

        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++)

        {

            x=ChartInset+(i*ChartWidth)/Xdivs;

            y=ChartHeight+ChartInset;

            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++)

        {

            x=ChartInset;

            y=ChartHeight+ChartInset-(i*ChartHeight/Ydivs);

            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.RotateTransform(180);

        g.TranslateTransform(0,-Height);

        g.TranslateTransform(-ChartInset,ChartInset);

        g.ScaleTransform(-1, 1);

 

        //draw chart data

        datapoint prevPoint = new datapoint();

        prevPoint.valid=false;

        foreach(datapoint myPoint in chartValues)

        {

            if(prevPoint.valid==true)

            {

                x0=ChartWidth*(prevPoint.x-Xorigin)/ScaleX;

                y0=ChartHeight*(prevPoint.y-Yorigin)/ScaleY;

                x=ChartWidth*(myPoint.x-Xorigin)/ScaleX;

                y=ChartHeight*(myPoint.y-Yorigin)/ScaleY;

                g.DrawLine(blackPen,x0,y0,x,y);

                g.FillEllipse(blackBrush,x0-2,y0-2,4,4);

                g.FillEllipse(blackBrush,x-2,y-2,4,4);

            }

            prevPoint = myPoint;

        }

 

        //finally send graphics to browser

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

    }

 

    ~LineChart()

    {

        g.Dispose();

        b.Dispose();

    }

}

 

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;

    c.AddValue(50,50);

    c.AddValue(100,100);

    c.AddValue(200,150);

    c.AddValue(450,450);

    c.Draw();

}

</script> 


Login to add your contents and source code to this article
 About the author
 
Steve Hall
Looking for C# Consulting?
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional consulting company, our consultants are well-known experts in .NET and many of them are MVPs, authors, and trainers. We specialize in Microsoft .NET development and utilize Agile Development and Extreme Programming practices to provide fast pace quick turnaround results. Our software development model is a mix of Agile Development, traditional SDLC, and Waterfall models.
Click here to learn more about C# Consulting.
 
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
SQL and .NET performance profiling in one place
Investigate SQL and .NET code side-by-side with ANTS Performance Profiler 6, so you can see which is causing the problem without switching tools.
Go.NET
Build custom interactive diagrams, network, workflow editors, flowcharts, or software design tools. Includes many predefined kinds of nodes, links, and basic shapes. Supports layers, scrolling, zooming, selection, drag-and-drop, clipboard, in-place editing, tooltips, grids, printing, overview window, palette. 100% implemented in C# as a managed .NET Control. Document/View/Tool architecture with many properties&events. Optional automatic layout.
Dundas Software
Dundas Chart for .NET is the most advanced .NET charting package available today.  With an extremely complete feature set, elegant architecture and easy implementation, Dundas Chart can quickly add advanced Charting functionality to enhance and transform ASP.NET and Windows Forms applications.  Whether you are implementing charting into internal projects, or building applications for clients, Dundas Chart offers advanced technology and advanced results to get the most out of data.
60 FREE UI Controls from DevExpress
Register for your FREE copy on over 60 free presentation controls from DevExpress - Absolutely Free-of-Charge without any royalties or distribution costs. Visit Devexpress.com/60 today. Free controls include advanced lists box, dropdown calendar, rich text edit, spin edit, tab control and so much more!

DevExpress engineers feature rich presentation controls and reporting tools for WinForms, ASP.NET, WPF, and Silverlight. Our technologies help you build your best, see complex software with greater clarity and deliver compelling business solutions for Windows and the web in the shortest possible time.
Clickatell's SMS Gateway
Clickatell's Developer Solutions allow you to SMS enable any website or application via a range of API's. Learn More about our API connections.
Free access to .NET Memory Management video
Everything you need to know about Garbage Collection, Temporary Objects, Fragmentation, Finalization and common causes of memory leaks in .NET. Watch the video here.
Microsoft Visual Studio 2010
Visualize your workspace with new multiple monitor support, powerful Web development, new SharePoint support with tons of templates and Web parts, and more accurate targeting of any version of the .NET Framework. Get set to unleash your creativity.
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
Developer-Ready ASP.NET 2.0 Web Hosting with 3 MONTHS FREE
Now supporting .NET 3.0 Framework with Windows Workflow Foundation, Windows Communication Foundation (WCF), Windows Presentation Foundation (WPF), windows CardSpace (WCS)! Providing more flexibility for Developers with Web Services Support and a User/Permission Manger. Also supporting MS SQL 2005/2000 with Real-Time Backups, FREE Automated Attach .MDF Tool, FREE SQL Restore and Shrink SQL DB Tools, and SQL
Read the Top 10 Books for Microsoft Developers, 15 Days FREE
Read the Top 10 Books for Microsoft Developers, 15 Days FREE
Try Safari Books Online - 15 Days FREE + 15% Off for 1 Year
Try Safari Books Online - 15 Days FREE + 15% Off for 1 Year
 
 Post a Feedback, Comment, or Question about this article
Subject:
Comment:
DevExpress Free UI Controls
Become a Sponsor
 Comments
Help me ! by Nguyen Xuan On June 28, 2007
chartValues.Add(myPoint) Error : Name 'ChartValues' doesn't exist in a present context.
Reply | Email | Delete | Modify | 
Re: Help me ! by Amit On September 22, 2007
Use

System.Collections

and

 System.Collections.Generic namespace to resolve this problem.....

Reply | Email | Delete | Modify | 
Re: Help me ! by Steve On October 17, 2007

The listvalue is named chartValues, not ChartValues.

 

Reply | Email | Delete | Modify | 
help me ..... urgent by Hari On October 19, 2007
'LineChart1.LineChart(int, int, .Web.UI.Page)' is a 'method' but is used like a 'type'
Reply | Email | Delete | Modify | 
Help me by Hari On October 19, 2007
protected void Page_Load(object sender, EventArgs e) { LineChart lc= new LineChart(640, 480, Page); lc.Title = "My Line Chart"; lc.Xorigin = 0; lc.ScaleX = 500; lc.Xdivs = 5; lc.Yorigin = 0; lc.ScaleY = 1000; lc.Ydivs = 5; lc.AddValue(50, 50); lc.AddValue(100, 100); lc.AddValue(200, 150); lc.AddValue(450, 450); Draw(); } 'LineChart1.LineChart(int, int, System.Web.UI.Page)' is a 'method' but is used like a 'type'
Reply | Email | Delete | Modify | 
line graph in VB.Net for ASP.Net by Jeff On November 15, 2007
Do you have the code in VB.Net for this line graph for ASP.Net? Thanks. JeffCambier@CambierConcepts.com
Reply | Email | Delete | Modify | 
line grpahs for windows appliaction by Kalyan On December 29, 2008
I want a sample code for Windows appliaction
Reply | Email | Delete | Modify | 
Dual axes - Y - Axis by Kalyan On December 29, 2008
help me out for placing Y1 and Y2 axis for a single X Axis, Bot Y1 and Y2 values are different.
Reply | Email | Delete | Modify | 
Line chart not work on Opera and Netscape Navigator browser by rakesh On February 6, 2009
Hi sir, As your are using Response.OutputStream to save and dispaly the image it only work on IE browser. I find it difficulty to get same result on Opera and Netscape Navigator browser. Please do the needful. Regards, Rakesh (ladrakesh@rediffmail.com)
Reply | Email | Delete | Modify | 
Help me by jas On June 15, 2009
LineChart c = new LineChart(640, 480,Page);
Error    2    Argument '3': cannot convert from 'System.Web.UI.Page' to 'Page' 
Reply | Email | Delete | Modify | 
help me to draw column chart (bar chart) in asp.net by shilin On October 1, 2009
this code given is working and very helpful.
if any one know more about this then please
help me to draw column chart (bar chart) in asp.net .
waiting for your replys
Reply | Email | Delete | Modify | 
Thanks Alot by Vineeta On October 9, 2009
Hi This is the same as I needed. But I need one more thing. I have to show the tooltip of each point. How can i do that? I have Drawen the (3,45) point as string at that point but it is showen like mirror image. Because we have rotated it on 180 angle. how can i do that?
Reply | Email | Delete | Modify | 
How to draw multiple line. by Neeraj On June 3, 2010
How to draw multiple line on same graph.
Reply | Email | Delete | Modify | 
Re: How to draw multiple line. by SS On June 17, 2010
use img tag to show graph in other browsers
Reply | Email | Delete | Modify | 

 Hosted by MaximumASP  |  Found a broken link?  |  Contact Us  |  Terms & conditions  |  Privacy Policy  |  Site Map  |  Suggest an Idea  |  Media Kit
Current Version: 5.2010.8.14
 © 2010  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.