Bar Chart in ASP.NET using VB.NET

This article is about how to generate bar-charts for any data information which is available on a web page.
  • 4685
 

This article is about how to generate bar-charts for any data information which is available on a web page. The classes used in this are provided in the .Net.System.Drawing namespace to generate chart.

In the following example we illustrates the profit of a general store based on every four month sales collection. The X-axis represents the profit of the store and the Y-axis indicate months at regular intervals.


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.

Sub Page_Load(sender As Object, e As EventArgs)

 ' Static Chart (with Bar Labels)
     Dim arrValues1() As Integer = {4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 46, 50}
     Dim arrLabels1() As String = {"P1", "P2", "P3", "P4", "P5", "P6", "P7", "P8", "P9", "P10", "P11", "P12", "P13"}
     BarChart.Text = BuildChartHTML(arrValues1, arrLabels1, "Bar Chart", "X-axis", "Y-axis")

 ' Chart made from random numbers (without Bar Labels)
     Dim arrValues2(49) As Integer
     DimAs Integer
     Randomize
     For I = 0 to 49
       arrValues2(I) = Int((50 + 1) * Rnd)
     Next I
End Sub

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

Bar Chart Output

chart.gif

 

This is our bar chart and displayed on the screen. Also, if required, the bar chart can be saved as an image.

 

 
Article Extensions
Contents added by Umer Pasha on Feb 03, 2012
public void Page_Load(object sender, EventArgs e)
{
// Static Chart (with Bar Labels)
int[] arrValues1 = {
6,
10,
12,
18,
23,
26,
27,
28,
30,
34,
37,
45,
55
};
string[] arrLabels1 = {
"P1",
"P2",
"P3",
"P4",
"P5",
"P6",
"P7",
"P8",
"P9",
"P10",
"P11",
"P12",
"P13"
};

 
myFirstChart.Text = BuildChartHTML(ref arrValues1, ref arrLabels1, ref "Bar Chart", ref "X-axis", ref "Y-axis");

 

 
// Chart made from random numbers (without Bar Labels)
int[] arrValues2 = new int[50];
int I = 0;

 
VBMath.Randomize();
for (I = 0; I <= 49; I++) {
arrValues2[I] = Conversion.Int((50 + 1) * Rnd());
}

 

 
}

 

 
public object BuildChartHTML(ref aValues, ref aLabels, ref strTitle, ref strXAxisLabel, ref strYAxisLabel)
{
// Some user changable graph defining constants.  All units are in screen pixels
const int GRAPH_WIDTH = 450;
// The width of the body of the graph
const int GRAPH_HEIGHT = 250;
// The heigth of the body of the graph
const int GRAPH_BORDER = 5;
// The size of the black border
const int GRAPH_SPACER = 2;
// The size of the space between the bars

 
// Debugging constant so I can eaasily switch on borders in case
// the tables get messed up.  Should be left at zero unless you're
// trying to figure out which table cell is doing what.
const int TABLE_BORDER = 0;
//Const TABLE_BORDER = 10

 
// Declare our variables
int I = 0;
int iMaxValue = 0;
int iBarWidth = 0;
int iBarHeight = 0;
StringBuilder myStringBuilder = default(StringBuilder);

 
// Get the maximum value in the data set
iMaxValue = 0;
for (I = 0; I <= Information.UBound(aValues); I++) {
if (iMaxValue < aValues(I))
iMaxValue = aValues(I);
}
//Response.Write iMaxValue ' Debugging line

 

 
// Calculate the width of the bars
// Take the overall width and divide by number of items and round down.
// I then reduce it by the size of the spacer so the end result
// should be GRAPH_WIDTH or less!
iBarWidth = (GRAPH_WIDTH / (Information.UBound(aValues) + 1)) - GRAPH_SPACER;
//Response.Write iBarWidth ' Debugging line

 
// Start building the graph's HTML
myStringBuilder = new StringBuilder();

 
myStringBuilder.Append("<TABLE BORDER=\"" + TABLE_BORDER + "\" CELLSPACING=\"0\" CELLPADDING=\"0\"> " + Constants.vbCrLf);
myStringBuilder.Append("<TR><TD COLSPAN=\"3\" ALIGN=\"center\"><H2>" + strTitle + "</H2></TD></TR> " + Constants.vbCrLf);
myStringBuilder.Append("<TR> " + Constants.vbCrLf);
myStringBuilder.Append("    <TD VALIGN=\"center\"><B>" + strYAxisLabel + "</B></TD> " + Constants.vbCrLf);
myStringBuilder.Append("    <TD VALIGN=\"top\"> " + Constants.vbCrLf);
myStringBuilder.Append("      <TABLE BORDER=\"" + TABLE_BORDER + "\" CELLSPACING=\"0\" CELLPADDING=\"0\"> " + Constants.vbCrLf);
myStringBuilder.Append("        <TR> " + Constants.vbCrLf);
myStringBuilder.Append("          <TD ROWSPAN=\"2\"><IMG SRC=\"images/spacer.gif\" BORDER=\"0\" WIDTH=\"1\" HEIGHT=\"" + GRAPH_HEIGHT + "\"></TD> " + Constants.vbCrLf);
myStringBuilder.Append("          <TD VALIGN=\"top\" ALIGN=\"right\">" + iMaxValue + "&nbsp;</TD> " + Constants.vbCrLf);
myStringBuilder.Append("        </TR> " + Constants.vbCrLf);
myStringBuilder.Append("        <TR> " + Constants.vbCrLf);
myStringBuilder.Append("          <TD VALIGN=\"bottom\" ALIGN=\"right\">0&nbsp;</TD> " + Constants.vbCrLf);
myStringBuilder.Append("        </TR> " + Constants.vbCrLf);
myStringBuilder.Append("      </TABLE> " + Constants.vbCrLf);
myStringBuilder.Append("    </TD> " + Constants.vbCrLf);
myStringBuilder.Append("    <TD> " + Constants.vbCrLf);

 
myStringBuilder.Append("      <TABLE BORDER=\"" + TABLE_BORDER + "\" CELLSPACING=\"0\" CELLPADDING=\"0\"> " + Constants.vbCrLf);
myStringBuilder.Append("        <TR> " + Constants.vbCrLf);
myStringBuilder.Append("          <TD VALIGN=\"bottom\"><IMG SRC=\"images/spacer_black.gif\" BORDER=\"0\" WIDTH=\"" + GRAPH_BORDER + "\" HEIGHT=\"" + GRAPH_HEIGHT + "\"></TD> " + Constants.vbCrLf);

 
// We're now in the body of the chart.  Loop through the data showing the bars!
for (I = 0; I <= Information.UBound(aValues); I++) {
iBarHeight = Conversion.Int((aValues(I) / iMaxValue) * GRAPH_HEIGHT);

 
// This is a hack since browsers ignore a 0 as an image dimension!
if (iBarHeight == 0)
iBarHeight = 1;
myStringBuilder.Append("          <TD VALIGN=\"bottom\"><IMG SRC=\"images/spacer.gif\" BORDER=\"0\" WIDTH=\"" + GRAPH_SPACER + "\" HEIGHT=\"1\"></TD> " + Constants.vbCrLf);
myStringBuilder.Append("          <TD VALIGN=\"bottom\"><IMG SRC=\"images/spacer_red.gif\" BORDER=\"0\" WIDTH=\"" + iBarWidth + "\" HEIGHT=\"" + iBarHeight + "\" ALT=\"" + aValues(I) + "\"></TD> " + Constants.vbCrLf);
}
myStringBuilder.Append("        </TR> " + Constants.vbCrLf);

 
// I was using GRAPH_BORDER + GRAPH_WIDTH but it was moving the last x axis label
myStringBuilder.Append("        <TR> " + Constants.vbCrLf);
myStringBuilder.Append("          <TD COLSPAN=\"" + (2 * (Information.UBound(aValues) + 1)) + 1 + "\"><IMG SRC=\"images/spacer_black.gif\" BORDER=\"0\" WIDTH=\"" + GRAPH_BORDER + ((Information.UBound(aValues) + 1) * (iBarWidth + GRAPH_SPACER)) + "\" HEIGHT=\"" + GRAPH_BORDER + "\"></TD> " + Constants.vbCrLf);
myStringBuilder.Append("        </TR> " + Constants.vbCrLf);

 
// The label array is optional and is really only useful for small data sets with very short labels!
if (Information.IsArray(aLabels)) {
myStringBuilder.Append("        <TR> " + Constants.vbCrLf);
myStringBuilder.Append("          <TD><!-- Spacing for Left Border Column --></TD> " + Constants.vbCrLf);
for (I = 0; I <= Information.UBound(aValues); I++) {
myStringBuilder.Append("          <TD><!-- Spacing for Spacer Column --></TD> " + Constants.vbCrLf);
myStringBuilder.Append("          <TD ALIGN=\"center\"><FONT SIZE=\"1\">" + aLabels(I) + "</FONT></TD> " + Constants.vbCrLf);
}
myStringBuilder.Append("        </TR> " + Constants.vbCrLf);
}
myStringBuilder.Append("      </TABLE> " + Constants.vbCrLf);

 
myStringBuilder.Append("    </TD> " + Constants.vbCrLf);
myStringBuilder.Append("  </TR> " + Constants.vbCrLf);
myStringBuilder.Append("  <TR> " + Constants.vbCrLf);
myStringBuilder.Append("    <TD COLSPAN=\"2\"><!-- Place holder for X Axis label centering--></TD> " + Constants.vbCrLf);
myStringBuilder.Append("    <TD ALIGN=\"center\"><BR><B>" + strXAxisLabel + "</B></TD> " + Constants.vbCrLf);
myStringBuilder.Append("  </TR>");
myStringBuilder.Append("</TABLE>");

 
return myStringBuilder.ToString;
}

 

 

 
protected void Button1_Click(object sender, System.EventArgs e)
{
}

 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.