Create html bar graph in ASP/VBSscript 

HTML charting in ASP - basics

     Charting is most common task you will need in data presentation. This article shows simple method to create charts without external client or server objects, without .gif, jpg or png - the chart is created as HTML, directly in page. The simpliest task is to create bar charts. HTML gives you many formatting possibilities to show bars in graph.
     See also second article about HTML stacked graph.

     There are some important things we will need to create such chart - first of them is a plain bar. The bar can be created using Table tag - simple horizontal bars.

<TABLE bgColor=red
 height=10 width=200
 cellSpacing=0 cellPadding=0 border= 0>
 <TR><TD></TD></TR>
</TABLE>
<TABLE bgColor=green
 height=10 width=100
 cellSpacing=0 cellPadding=0 border= 0>
 <TR><TD></TD></TR>
</TABLE>

Vertical bars

     There is some more HTML code to create vertical bars - we have to create chart table with background to align vertical bars to bottom base. Next tables is stacked bars with 3 series and 3 points.

<TABLE bgColor=yellow
 height=100 width=100
 cellSpacing=0 cellPadding=0 border=0>
<tr><TD VAlign=bottom>
	<TABLE 
	 height="100%" width=20
	 cellSpacing=0 cellPadding=0 border=0 Align=left>
	 <TR><TD></TD></TR>
	 <TR><TD Height="20%" bgColor=red></TD></TR>
	 <TR><TD Height="30%" bgColor=green></TD></TR>
	 <TR><TD Height="15%" bgColor=blue></TD></TR></TABLE>

	<TABLE 
	 height="100%" width=20
	 cellSpacing=0 cellPadding=0 border=0 Align=left>
	 <TR><TD></TD></TR>
	 <TR><TD Height="30%" bgColor=red></TD></TR>
	 <TR><TD Height="40%" bgColor=green></TD></TR>
	 <TR><TD Height="10%" bgColor=blue></TD></TR>
	</TABLE>

	<TABLE 
	 height="100%" width=20
	 cellSpacing=0 cellPadding=0 border=0 Align=left>
	 <TR><TD></TD></TR>
	 <TR><TD Height="50%" bgColor=red></TD></TR>
	 <TR><TD Height="10%" bgColor=green></TD></TR>
	 <TR><TD Height="30%" bgColor=blue></TD></TR>
	</TABLE>

</TD></tr>
</TABLE>

Series decription

     The main problem of HTML charts is a description of series and points. We will need vertical orientation of text - but there is no HTML tag for such action.

     We can use <A Title="some description"> for points description, but the text is visible only with mouse pointer. IE has one more undocumented special style parameter - WRITING-MODE: tb-rl.

<DIV style="FONT-SIZE: 15pt; WIDTH: 15pt; WRITING-MODE: tb-rl">
  527</DIV>

Simple HTML bar chart function

     Next VBS code generates simple HTML bar chart from teo dimensional recordset. The recordset is a cross-table set containing serie names in field names, x-labels in first column and values in other columns. In our case, Top5Stats query contains next data:

dtDay	ASP/VBS database performance test and comparison_	Base64 decode VBS function	Request_Form and stack overflow?	Upload file using IE without user interaction - VBA	Upload file using IE+ADO without user interaction - VBS
1.11.2002	22	22	22	47	31
2.11.2002	5	6	1	13	12
3.11.2002	13	12	6	28	37
4.11.2002	38	52	42	76	78
5.11.2002	51	53	30	75	104
6.11.2002	50	49	34	66	92
……

The page result is the next chart:

ASP/VBS database performance test and comparison_   Base64 decode VBS function   Request_Form and stack overflow?   Upload file using IE without user interaction - VBA   Upload file using IE+ADO without user interaction - VBS

17.1. 2003  18.1. 2003  19.1. 2003  20.1. 2003  21.1. 2003  22.1. 2003  23.1. 2003  24.1. 2003  25.1. 2003  26.1. 2003  27.1. 2003  28.1. 2003  29.1. 2003  30.1. 2003  31.1. 2003  1.2. 2003  2.2. 2003  3.2. 2003  4.2. 2003  5.2. 2003  6.2. 2003  7.2. 2003  8.2. 2003  9.2. 2003  10.2. 2003  11.2. 2003  12.2. 2003  13.2. 2003  14.2. 2003  15.2. 2003

Response.Write StatsGraph(100)

Function StatsGraph(Height)
	Dim SQL , RS

	'get last 30 records from statistics.
	SQL = "Select top 30 * from [Top5Stats] order by 1 DESC" & vbCrLf
	'Order them by first column (date) ascending
	SQL = "select * from (" & SQL & ") As a order by 1 ASC"


	'get recordset from SQL
	Set RS = GetConn.Execute(SQL)

	Dim HTML
	HTML = HTMLGraf(RS, Height, 3) 
	StatsGraph = HTML
End Function 



'Simple HTML bar chart
'2003 Antonin Foller, http://www.motobit.com
'function accepts recordset with first column As X values
'and other columns As data series.
'The data series must be aligned To graph height.
Function HTMLGraf(RS, height, SerieWidth)
  Dim Col, Row, cCol 
  Dim Colors, nCols
  nCols = RS.Fields.Count - 1

  'Colors For series
  Colors = Array("Magenta", "LightGreen", "Yellow", "Black", "Blue", "Red")
  
  'Chart border table
  Dim aHTML, rowHTML
  aHTML = "<Table border=1 bordercolor=blue CellPadding=0 CellSpacing=0 height=" _
    & height & "><tr><td vAlign=Center>"

  'Series labels.
  For cCol = 1 To nCols
    Color = colors(cCol-1)
    aHTML = aHTML & "<Table width=100% border=0 CellPadding=0 CellSpacing=0 height=" _
      & SerieWidth & "><tr><td bgColor=" & Color & _
      " style=""color:white;font-size:8pt""> " & _
      RS.Fields(cCol).Name & " </td></tr></table>"
  Next
  
  aHTML = aHTML & "</td></tr><tr><td vAlign=Center>"
  
  'Each row of recordset is one point.
  Do While Not rs.eof
    rowHTML = "<Table Height=" & height & _
      " Cellpadding=0 CellSpacing=0 border=0 Align=Left><TR><TD>" 
    For cCol = 1 To nCols
      Dim Value, Color
      'get serie color
      Color = colors(cCol-1)

      on error resume Next
      'get value
      Value = (rs(cCol))

      If isnull(Value) Or err > 0 Then 
        'empty Or problematic value
        rowHTML = rowHTML & "<Table Height=1 Cellpadding=0 CellSpacing=0 border=0 Width=" & _
          SerieWidth & " Align=Left><tr><td></td></tr></Table>" 
      Else
        'create one data point
        'the data point size is defined by td height
        rowHTML = rowHTML & "<Table Height=" & height 
        rowHTML = rowHTML & " Cellpadding=0 CellSpacing=0 border=0 Width="
        rowHTML = rowHTML & SerieWidth & " Align=Left><tr><td height=" 
        rowHTML = rowHTML & (100-Value) & "%" 
        rowHTML = rowHTML & "></td></tr><tr><td bgColor=" 
        rowHTML = rowHTML & Color  & " height=" & Value 
        rowHTML = rowHTML & "%" & "></td></tr></Table>"
      End If
    Next
    
    'X-labels.
    rowHTML = rowHTML & "</td></tr><tr><td Align=Center NoWrap>"
    rowHTML = rowHTML & "<DIV style=""FONT-SIZE: 10pt; WIDTH: 10pt; WRITING-MODE: tb-rl""> " 
    rowHTML = rowHTML & rs(0) & "</DIV>"
    rowHTML = rowHTML & "</td></tr></table>" & vbCrLf
    aHTML = aHTML & rowHTML
    rs.MoveNext
  Loop

  'Closing border table tag.
  aHTML = aHTML & "</td></tr></table>"
  HTMLGraf = aHTML
End Function

<A
 Href="http://www.motobit.com/tips/detpg_html-bar-graph-chart/"
 Title="Functions with full source code to
  creare bar charts from an
  ASP page."
>Create html bar graph in ASP/VBSscript</A>