HTML stacked bar graph in ASP/VBSscriptMOTOBIT.COM

About | IIS monitor | ASP upload | ASP dictionary | UserManager | Pure ASP upload script | Programming tips
Other articles:
Read and write SQL image data, store binary file to sql table. (WSH, Database, Conversion, VBScript)
Download multiple files in one http request (File & data transfer, VBScript)
Convert a binary data (BinaryRead) to a string by VBS (Conversion, VBScript)
Work with binary files in VBSscript - read and write local and remote files (WSH, File & data transfer, Functions, VBScript)
Do you like this article?
Please, rate it
and write review!
Rated:
by Aspin.com users
What do you think?
Areas > Languages > VBScript
Areas > ASP / ASP.Net > Functions
Areas > ASP / ASP.Net > Database

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>" & _
   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

See also

for 'HTML stacked bar graph in ASP/VBSscript' article
Create html bar graph in ASP/VBSscriptFunctions with full source code to creare bar charts from an ASP page.

Copyright and use this code

The source code on this page and other samples at http://www.motobit.com/tips/ are a free code, you can use it as you want: copy it, modify it, use it in your products, ...
If you use this code, please:
1. Leave the author note in the source.
or
2. Link this sample from you page.
<A
 Href="http://www.motobit.com/tips/detpg_html-stacked-bar-graph/"
 Title="Functions with full source code to
	creare simple stacked bar chart
	from an ASP page."
>HTML stacked bar graph in ASP/VBSscript</A>

© 1996 - 2012 Antonin Foller, Motobit Software | About, Contacts | e-mail: info@pstruh.cz

Partner sites: Search Czech Last minute Zajezdy Obsah na mobil Hry na mobil Java Hry Print-shop Affiliate programy

Kurzy: Akcie | Urad prace | Zakony | Zlato | Firmy | Dane

     IISTracer - IIS ISAPI real-time monitor IISTracer is a real-time monitoring tool for Microsoft IIS, which will show/log you what is happenning on IIS server right now. It let's you reveal problems with long-running scripts (.asp, .cgi, cfm...), hang-up states and low resource situations and lets you stop long-running requests (uploads/downloads).      ActiveX User account Manager - Set of simple objects for creating, deleting, and managing user accounts, groups, servers and domains in the Windows NT environment.
     Active log file - Hi-performance text file logging for ASP/VBS/VBA applications. Lets you create daily/weekly/monthly log files with variable number of logged values and extra timing and performance info.      ActiveX windows registry editor - Intuitive, easy to use COM interface to windows registry. Set of classes to read/enumerate/modify windows registry keys and values from ASP, VBS and T-SQL.
     ActiveX/ASP Multi Dictionary object - Free-threaded hi-speed dictionary algorithm with unique/nonunique keys (map/multimap). Connect to another dictionary object in the same process. Lock and Unlock methods to synchronize tasks (application scope). Share ASP Application/Session objects.      Export DBF/MDB from ASP - Conversion from recordset to MDB/DBF. Direct binary output of MDB or DBF files from ASP pages with one row of code.
     Pure-ASP upload - lets you upload files using Pure ASP VBS code (using multipart/form-data and input type=file).      ByteArray - Works with safearray binary data (VT_UI1 | VT_ARRAY) - save/restore binary data from disk, find, work with code pages, convert to string/hexstring(SQL).
     WebChecker - Checks http, https, ftp and gopher internet connections in regular intervals. Lets you monitor web site functionality (uptime). Enables restart or notification on problems.      HTTPLog ISAPI filter - Lets you log incomming/outgoing http header and document data to separate files. Monitor of IIS service input/output.
Motobit.com