You may have seen web pages that include a horizontal bar graph showing responses to a questionaire or other numeric results without the use of a graphing tool. This article will demonstrate how to build such a graph using html and a dataset.
By: John Kilgo 
Date: July 28, 2003 
Download the code. Printer Friendly Version
It really is not difficult to create a horizontal bar graph using an HTML table. All you need to do is compute a percentage of a total for each item and then set
1<td (bargraph.aspx.vb)="" 100="" <div="" a="" accomodate="" all="" also="" and="" background="" bar="" behind="" between="" build="" code="" color="" computations="" difference="" do="" example="" file="" file.="" for="" from="" graph="" graph.="" have="" html="" in="" include="" means="" must="" no="" northwind="" of="" on="" our="" percentage="" percentage.="" products="" table.="" the="" this="" to="" unitsinstock="" use="" value="" value's="" we="" which="" width="to" will="" you="" your="">... in our .aspx file shown below. In our code behind file we will, at the end, set the InnerHtml property of the Div to produce all of the HTML for the .aspx page. The code for BarGraph.aspx is shown below without any further explanation.
@ Page Language="vb" AutoEventWireup="false" Src="BarGraph.aspx.vb" Inherits="DotNetJohn.BarGraph"
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2
3<html>
4<head>
5<title>BarGraph</title>
6<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"/>
7<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE"/>
8<meta content="JavaScript" name="vs_defaultClientScript"/>
9<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"/>
10</head>
11<body ms_positioning="GridLayout">
12<form id="Form1" method="post" runat="server">
13</form>
14<div id="ShowTable" runat="server">Our table appears here</div>
15</body>
16</html>
17---
18
19To make our graph a little more interesting we will color code the bars. We will (arbitrarily) set 125 as the maximum UnitsInStock for any product and base our percentage on it. In other words, if there 25 units in stock of a certain product, the colored <td> will have a width of 20% (25 / 125) * 100. Any product with a percentage of less than 20% will be colored red, products with percentages between 20% and 80% will be blue, and products with a percentage over 80% will be in green.
20
21The code behind file is not very long but we will display it in three sections for ease of discussion. This first section is just the declarations and the database access to obtain the data and create the DataSet.
22
23Imports System.Data
24Imports System.Data.SqlClient
25Imports System.Configuration
26
27Namespace DotNetJohn
28
29Public Class BarGraph
30Inherits System.Web.UI.Page
31
32Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
33Dim objConn As New SqlConnection(ConfigurationSettings.AppSettings("NorthwindConnection"))
34Dim strSql As String = "Select ProductName, UnitsInStock From Products Order By ProductName"
35Dim da As New SqlDataAdapter(strSql, objConn)
36Dim ds As New DataSet()
37da.Fill(ds, "Products")
38---
39
40This next section just establishes our html table and defines the table header.
41
42
43Dim strHTML As String
44strHTML = "<table border="1" width="80%">"
45strHTML &= "<tr>"
46strHTML &= "<td>ProductName</td><td>Percentage of 125 | red <20% | blue 20-80% | green >80% |"
47strHTML &= "</td><td>UnitsInStock</td>"
48strHTML &= "</tr>"
49---
50
51This last section is where most of the work gets done to produce our bar graph. intValue is the percentage of the total (125) that gets plotted in color. intBlank is the right-most portion of the graph and is the difference between 100 and intValue. We then start the body of the table. The first <td> contains the product name. Within the the next <td> we have an embedded table containing intValue, color coded, and intBlank colorless. In that section of code we check the value of intValue. If it is less than 20 we color it red. If it is greater than 80 we color it green, otherwise we color it blue. We might want to do something like this to show that the red products need to be re-stocked and that the green items may be overstocked and we might want to hold a sale on these items. We then finish out the table with the actual UnitsInStock count (the actual count, not a percentage). Finally we set ShowTable's InnerHtml to the strHTML variable that we have built withing the code behind file. Remember that "ShowTable" was the ID we gave the <div> tag on the .aspx page. We can do this because we included the runat="server" attribute in the <div> tag on the .aspx page.
52
53
54Dim dr As DataRow
55Dim intValue, intBlank As Integer
56For Each dr In ds.Tables("Products").Rows
57intValue = 100 * (dr("UnitsInStock") / 125)
58intBlank = 100 - intValue
59strHTML &= "<tr><td width="30%">" & dr("ProductName") & "</td>" & _
60"<td width="60%"><table width="100%"><tr>"
61If intValue < 20 Then
62strHTML &= "<td %="" bgcolor="red" width=" & intValue.ToString & ">"
63ElseIF intValue > 80 Then
64strHTML &= "<td %="" bgcolor="green" width=" & intValue.ToString & ">"
65Else
66strHTML &= "<td %="" bgcolor="blue" width=" & intValue.ToString & ">"
67End If
68strHTML &= " </td>" & _
69"<td %="" <="" td="" width=" & intBlank.ToString & ">" & _
70"</td></td></td></tr></table></td>" & _
71"<td width="10%">" & dr("UnitsInStock").ToString & "</td></tr>"
72Next
73strHTML &= "</div></div></td></td></table>"
74ShowTable.InnerHtml = strHTML
75End Sub
76
77End Class
78
79End Namespace
80---
81
82I hope you have learned a new techinque you can put in you bag in case you need it in the future. You may also have learned something about cycling through a DataSet using the Rows collection. Best of luck.
83
84You may run the program here.
85You may download the code here.</td></td>