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>

527

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

Create html bar graph in ASP/VBSscriptMOTOBIT.COM

HTML charting in ASP - basics

Vertical bars

Series decription

Simple HTML bar chart function

See also

Copyright and use this code