Click here to Skip to main content
15,861,168 members
Articles / Web Development / IIS
Article

Generating Bar Chart in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.10/5 (20 votes)
8 Nov 2004CPOL 192K   3.6K   68   22
This article demonstrates how to create chart in ASP.NET using System.Drawing namespace.

Introduction

The following example demonstrates how to generate bar-charts for any business information available on a web page. This uses the classes which are provided in the .NET System.Drawing namespace to generate the chart.

Bar chart created in the below example illustrates the profit of a company for each month from January through December.

Generating the Bar chart

Data which is to be displayed on X axis and Y axis is stored in ArrayLists, and then the data is read from these ArrayLists for creating the required bar chart.

First, the ArrayLists are populated as follows:

VB
Dim aMonths As ArrayList = New ArrayList()
aProfits As ArrayList = New ArrayList()
aMonths.Add("January")
aMonths.Add("February")
aMonths.Add("March")
aMonths.Add("April")
aMonths.Add("May")
aMonths.Add("June")
aMonths.Add("July")
aMonths.Add("August")
aMonths.Add("September")
aMonths.Add("October")
aMonths.Add("November")
aMonths.Add("December")

aProfits.Add(240500)
aProfits.Add(220950)
aProfits.Add(283500)
aProfits.Add(340000)
aProfits.Add(325750)
aProfits.Add(123456)
aProfits.Add(235621)
aProfits.Add(345235)
aProfits.Add(290451)
aProfits.Add(152345)
aProfits.Add(653456)
aProfits.Add(785620)

Once the data is populated, the chart can be generated by calling the method DrawBarGraph:

VB
DrawBarGraph("Profits!", aMonths, aProfits)

DrawBarGraph is defined as follows:

VB
Sub DrawBarGraph(ByVal strTitle As String, _
        ByVal aX As ArrayList, ByVal aY As ArrayList)
    Const iColWidth As Integer = 60, iColSpace As Integer = 25, _
          iMaxHeight As Integer = 400, iHeightSpace As Integer = 25, _
          iXLegendSpace As Integer = 30, iTitleSpace As Integer = 50
    Dim iMaxWidth As Integer = (iColWidth + iColSpace) * aX.Count + iColSpace, _
          iMaxColHeight As Integer = 0, _
          iTotalHeight As Integer = iMaxHeight + iXLegendSpace + iTitleSpace

    Dim objBitmap As Bitmap = New Bitmap(iMaxWidth, iTotalHeight)
    Dim objGraphics As Graphics = Graphics.FromImage(objBitmap)
 
    objGraphics.FillRectangle(New SolidBrush(Color.White), _
                0, 0, iMaxWidth, iTotalHeight)
    objGraphics.FillRectangle(New SolidBrush(Color.Ivory), _
                0, 0, iMaxWidth, iMaxHeight)

    ' find the maximum value
    Dim iValue As Integer
    For Each iValue In aY
        If iValue > iMaxColHeight Then iMaxColHeight = iValue
    Next

    Dim iBarX As Integer = iColSpace, iCurrentHeight As Integer
    Dim objBrush As SolidBrush = New SolidBrush(Color.FromArgb(70, 20, 20))
    Dim fontLegend As Font = New Font("Arial", 11), _
        fontValues As Font = New Font("Arial", 8), _
        fontTitle As Font = New Font("Arial", 24)

     ' loop through and draw each bar
    Dim iLoop As Integer
    For iLoop = 0 To aX.Count - 1
        iCurrentHeight = ((Convert.ToDouble(aY(iLoop)) / _
               Convert.ToDouble(iMaxColHeight)) * _
               Convert.ToDouble(iMaxHeight - iHeightSpace))
        objGraphics.FillRectangle(objBrush, iBarX, _
        iMaxHeight - iCurrentHeight, iColWidth, iCurrentHeight)
        objGraphics.DrawString(aX(iLoop), fontLegend, _
           objBrush, iBarX, iMaxHeight)
        objGraphics.DrawString(Format(aY(iLoop), "#,###"), _
           fontValues, objBrush, iBarX, iMaxHeight - iCurrentHeight - 15)
        iBarX += (iColSpace + iColWidth)
    Next
    objGraphics.DrawString(strTitle, fontTitle, objBrush, _
          (iMaxWidth / 2) - strTitle.Length * 6, iMaxHeight + iXLegendSpace)
    'objBitmap.Save("C:\inetpub\wwwroot\graph.gif", ImageFormat.GIF) 

    objBitmap.Save(Response.OutputStream, ImageFormat.Gif)
    objGraphics.Dispose()
    objBitmap.Dispose()
End Sub

This code will generate the bar chart and display it on the screen. Also, if required, the bar chart can be saved as an image, just uncomment the line below in the above code:

VB
objBitmap.Save("C:\inetpub\wwwroot\graph.gif", ImageFormat.GIF)

License

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


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionIt works fine. Pin
Arun Banik11-Nov-11 0:14
Arun Banik11-Nov-11 0:14 
GeneralMy vote of 1 Pin
G.santosh priya13-Oct-11 21:56
G.santosh priya13-Oct-11 21:56 
Generalchart not displayed in firefox Pin
Devanathan chandran6-Mar-09 23:15
Devanathan chandran6-Mar-09 23:15 
QuestionNot applying for the masterpage Pin
Member 51870134-Mar-09 0:33
Member 51870134-Mar-09 0:33 
GeneralDoesnt work Pin
bone krusher31-Jan-09 14:33
bone krusher31-Jan-09 14:33 
GeneralNo Workie! Pin
JaceMalloy27-Feb-08 21:25
JaceMalloy27-Feb-08 21:25 
GeneralProblem with code Pin
Member 412528024-Feb-08 11:50
Member 412528024-Feb-08 11:50 
General3D in bar charts Pin
HasanNazeer16-Jan-08 3:13
HasanNazeer16-Jan-08 3:13 
GeneralRe: 3D in bar charts Pin
sidbaruah28-Apr-08 22:21
sidbaruah28-Apr-08 22:21 
To make some minor 3d effects you can draw a second rectangle slightly below the original bar chart rectangle, this will give it a look of a 3d bar chart..

I tried that out for a 3d pie chart and it was working good, gave it a 3d look.

I was born dumb!!
Laugh | :laugh: Programming made me laughLaugh | :laugh: !!!
--sid--

Generalerror when compiling with visual studio 2005 Pin
Meali00728-Nov-07 10:42
Meali00728-Nov-07 10:42 
QuestionOther Controls on the Page? Pin
John Tyce5-Oct-07 4:30
John Tyce5-Oct-07 4:30 
GeneralCentering the labels Pin
tmmy_cat28-Aug-07 11:05
tmmy_cat28-Aug-07 11:05 
QuestionBind the array to a datasource? Pin
ajwelch10-Apr-07 22:41
ajwelch10-Apr-07 22:41 
GeneralThis code in C# Pin
lauradonaghy20-Mar-07 4:39
lauradonaghy20-Mar-07 4:39 
GeneralRe: This code in C# Pin
malinwick19-Jul-07 3:28
malinwick19-Jul-07 3:28 
GeneralRe: This code in C# Pin
malinwick19-Jul-07 4:59
malinwick19-Jul-07 4:59 
Generaldoes not work in Firefox Pin
webber1234569-Mar-06 5:48
webber1234569-Mar-06 5:48 
GeneralRe: does not work in Firefox Pin
Jinx10118-Oct-06 10:24
Jinx10118-Oct-06 10:24 
GeneralRe: does not work in Firefox Pin
tmmy_cat28-Aug-07 10:15
tmmy_cat28-Aug-07 10:15 
GeneralCode Doesn't Work Pin
sap_03215-Apr-05 10:02
sap_03215-Apr-05 10:02 
GeneralThanks! Pin
Frank Sandersen26-Nov-04 12:28
Frank Sandersen26-Nov-04 12:28 
Generalexample image Pin
Tsjaar9-Nov-04 21:15
Tsjaar9-Nov-04 21:15 

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.