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 |
|
|
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
|
discuss this topic to forum
