The text of this article is not in this database — only its details are. The old site it was published on is gone, but the Internet Archive kept a copy: How to create Bar Chart in ASP.NET
Join the conversation! Your thoughts help the community grow.
Sign in to leave a comment
It is the same account you read, post and publish with — and you will come straight back to this page.
Umer PashaPosted Feb 3, 2012, 2:12 PM
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 + " </TD> " + Constants.vbCrLf); myStringBuilder.Append(" </TR> " + Constants.vbCrLf); myStringBuilder.Append(" <TR> " + Constants.vbCrLf); myStringBuilder.Append(" <TD VALIGN=\"bottom\" ALIGN=\"right\">0 </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) { }
Umer PashaPosted Feb 3, 2012, 2:09 PM
I wish this was in C#