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 ArrayList
s, and then the data is read from these ArrayList
s for creating the required bar chart.
First, the ArrayList
s are populated as follows:
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
:
DrawBarGraph("Profits!", aMonths, aProfits)
DrawBarGraph
is defined as follows:
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)
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)
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(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:
objBitmap.Save("C:\inetpub\wwwroot\graph.gif", ImageFormat.GIF)