HTML stacked bar graph in ASP/VBSscript

HTML charting in ASP - stacked bar chart

The previous article was about basics task in ASP and HTML charting. This page contains function which lets you create simple stacked bar chart with reference to URL from each data point and data point title description.

     The source data for this function consists from cube recordset with two columns - x-labels + data series.
     I created one sample data and chart with HTMLGraf function - chart of this tips article popularity, StatsDayRel view. The source recordset data contains xvalues - day, yvalues - article popularity normalized to 1, Code - URL code to get article detail (by click on chart data point) and pupularity counter to show as data point label.
     You can see another graph sample with HTMLGraf function at http://www.zpravodaj.cz/l.asp?PT=9.

xvalues	yvalues	Code	Title	Counter
23.1.2003	0.08805	Base64	Base64 decode VBS function	42
23.1.2003	0.067086	BinASP	Create and work with binary data in ASP/VBS.	32
23.1.2003	0.041929	CompactMDB	Compact (compress) mdb database from ASP/VBS	20
23.1.2003	0.039832	ConvertMDB	Convert MDB database to another format.	19
23.1.2003	0.067086	DateToHTTPDate	How to convert DATE to HTTP string date in ASP.	32
23.1.2003	0.02935	DynInc	ASP and dynamic includes.	14
23.1.2003	0.050314	RedirObjMoved	Response.Redirect and Object moved	24
23.1.2003	0.127883	ropenmdb	Open MDB files on remote computer in ASP	61
23.1.2003	0.081761	RSConvert	Download recordset as a CSV (DBF, MDB) file	39
23.1.2003	0.037736	SQLWrFile	Write to text file from MS-SQL.	18
24.1.2003	0.104822	Base64	Base64 decode VBS function	50
24.1.2003	0.083857	BinASP	Create and work with binary data in ASP/VBS.	40
24.1.2003	0.039832	CompactMDB	Compact (compress) mdb database from ASP/VBS	19
24.1.2003		ConvertMDB	Convert MDB database to another format.	30
24.1.2003		DateToHTTPDate	How to convert DATE to HTTP string date in ASP.	22
24.1.2003		DynInc	ASP and dynamic includes.	10
24.1.2003		RedirObjMoved	Response.Redirect and Object moved	35
24.1.2003	0.138365	ropenmdb	Open MDB files on remote computer in ASP	66
24.1.2003	0.100629	RSConvert	Download recordset as a CSV (DBF, MDB) file	48
24.1.2003		SQLWrFile	Write to text file from MS-SQL.	29

And next table is resulted HTML chart. This HTML chart is designed for Internet Explorer, because other browsers do not support WRITING-MODE: tb-rl style attribute.

Daily tips statistics


42
32
20
19
32
14
24
61
39
18
23.1. 2003


50
40
19
30
22
10
35
66
48
29
24.1. 2003


20
12
8
13
5
3
11
20
15
5
25.1. 2003


10
12
5
18
13
3
15
14
9
6
26.1. 2003


34
36
19
29
33
10
46
47
34
20
27.1. 2003


44
39
14
32
27
20
50
49
53
25
28.1. 2003


35
48
28
29
28
15
70
49
45
21
29.1. 2003


59
57
20
31
37
20
74
50
59
28
30.1. 2003


44
36
19
26
20
14
53
46
43
15
31.1. 2003


11
11
6
13
12
9
26
25
16
6
1.2. 2003


16
9
14
16
12
5
17
19
13
6
2.2. 2003


46
32
22
23
33
13
75
45
45
24
3.2. 2003


48
38
23
32
24
15
60
73
39
40
4.2. 2003


48
56
25
30
43
24
42
46
44
24
5.2. 2003


24
35
15
27
34
20
58
57
37
15
6.2. 2003


33
34
24
25
41
17
51
43
28
12
7.2. 2003


17
14
10
17
8
8
14
14
16
7
8.2. 2003


10
11
19
16
11
4
15
16
15
5
9.2. 2003


46
32
20
23
29
10
78
57
49
21
10.2. 2003


37
27
33
73
36
21
65
55
54
21
11.2. 2003


32
41
25
91
36
10
53
60
40
38
12.2. 2003


56
52
14
44
47
22
50
55
65
23
13.2. 2003


45
32
20
31
35
14
49
52
38
21
14.2. 2003


18
8
8
18
19
6
21
22
21
2
15.2. 2003


19
13
8
15
15
10
16
15
22
2
16.2. 2003


59
26
14
29
24
10
58
46
50
23
17.2. 2003


50
28
14
24
36
18
76
72
41
15
18.2. 2003


37
44
31
30
42
20
72
58
61
24
19.2. 2003


73
49
32
38
39
14
77
65
72
18
20.2. 2003


25
16
11
7
17
7
21
23
32
7
21.2. 2003

Response.Write StatsGraph(400)

Function StatsGraph(Height)
  Dim SQL , RS

  'get last 30 records from statistics.
  SQL = "Select * from [StatsDayRel]"

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

  Dim HTML
  HTML = HTMLGraf("Daily tips statistics", RS, 10, Height, 15) 
  StatsGraph = HTML
End Function 

'Simple HTML stacked bar graph
'2003 Antonin Foller, http://www.motobit.com
'function accepts recordset with first Next columns 
'xvalues, yvalues
'Code - code To create detail referecnce on data point
'Title - title on data point
'Counter - additional description on data point
Function HTMLGraf(ChartTitle, RS, nCols,  height, SerieWidth)
  Dim Col, Row,  cCol
  Dim XSize :XSize = 100
  Dim Colors, Prev

  'Create random colors For series.
  Colors = Array ("red", "green", "blue", "magenta", "cyan", "black", _
    "darkgray", "DARKCYAN", "BLANCHEDALMOND", "MEDIUMORCHID")
  ''redim Colors(nCols-1)
  'randomize
  'Prev = cdbl(&H33)
  'for Col=0 To nCols-1
  '  Colors(Col) = "#" & hex(&H202020 Or clng(rnd * &HFFFFFF))
  'Next
    
  
  Dim h, rh

  
  h = h & "<Table border=0 CellPadding=0 CellSpacing=0><tr><td vAlign=Bottom>"

  Dim xvalue, SerieCount
  xvalue = 0
  SerieCount = 0
  Do While Not rs.eof
    rh = "" ' clear row data value.
    
    If xvalue<>rs("xvalues") Then
      'new x-value. Write x-value data, clear SerieCount
      If xvalue<>0 Then 
        rh = rh & "<tr><td height=" & XSize 
        rh = rh & " style=writing-mode:tb-rl;font-size:7pt>&nbsp;&nbsp;" 
        rh = rh & xvalue & "</td></tr></table>"  & vbCrLf
        rh = rh & "</td><td vAlign=Bottom>"
      End If
      
      xvalue = rs("xvalues")
      rh = rh & "<Table style=cursor:hand Height=" & (height+XSize) 
      rh = rh & " Cellpadding=0 CellSpacing=0 border=0 Width=" & SerieWidth 
      rh = rh & " title=""" & xvalue & """><tr><td></td></tr>" & vbCrLf
      SerieCount = 1
    Else
      SerieCount = SerieCount+1
    End If
    
    Dim Value, Color
    'get serie color
    Color = colors(SerieCount-1)
    'get y-value from recordset
    Value = (rs("yvalues"))

    If Value<>0 Then 
      'create data point For nonzero value.
      'the data point consists from td of Color, height is a Value, title
      'there is also counter description inside the data point (writing-mode:tb-rl)
      'td has onclick To open detail.
      rh = rh & "<tr><td vAlign=Top bgColor=" & Color & " height=" & Value & "" & " title=""" & rs("Title") 
      rh = rh & """ onclick=""openm('" & rs("Code") & "')"">"
      rh = rh & "<Div style=color:BLACK;writing-mode:tb-rl;position:absolute;font-size:7pt>&nbsp;" 
      rh = rh & rs("Counter") &  "</div></td></tr>"  & vbCrLf  & vbCrLf
    End If
    h = h & rh
    rs.MoveNext
  Loop
  'x-values td data 
  h = h & "<tr><td height=" & XSize & " style=writing-mode:tb-rl;font-size:7pt>&nbsp;&nbsp;"
  h = h & xvalue & "</td></tr></table>"  & vbCrLf
  h = h & "</td></tr></table>"

  'Graph Border table
  h = "<Table border=1 CellPadding=0 CellSpacing=0 BGCOLOR=DARKSEAGREEN BORDERCOLOR=BLACK><tr><th>&#65533;" & _
   ChartTitle & "</th></tr><tr><td>" & h & "</td></tr></table>"

  'Data point detail click.
  h = h & "<"+"script>function openm(id){window.open('det.asp?'+id+'.htm');};</"+"Script>"
  HTMLGraf = h
End Function

HTML stacked bar graph in ASP/VBSscriptMOTOBIT.COM

HTML charting in ASP - stacked bar chart

See also

Copyright and use this code