Inside Technique : HTML Bar Charts : Server-Side Script

We generated the bar chart on the server using VBScript on the server. We processed your input in two steps. The first step adds all the values so we can calculate the percentage for each value. The second step generates the bar chart by iterating over the values.

<%
' Copyright 1999 InsideDHTML.com, LLC.

' The number of pixels that represent 100%
const barSize=200

' Add up all the values
lTotal = 0
for i=1 to 5
  ' Check if the value exists
  if request.queryString("value" & i)<>"" then
    if cLng(request.queryString("value" & i))>0 then
      lTotal= cLng(request.queryString("value" & i)) + lTotal
    end if
  end if
next

str="<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>" 
str=str & "<TR bgcolor=lightgrey><TH align=left>Label</TH>
str=str & "<TH WIDTH=5>&nbsp;</TH><TH>Value</TH>" 
str=str & "<TH WIDTH=10>&nbsp;</TH><TH align=center>
str= tr & "%</TH></TR>" 
for i=1 to 5
  lValue = request.queryString("value" & i)
  ' If value exists, process it
  if request.queryString("value" & i) <> "" then
    lValue = cLng(lValue)
    ' Calculate percentage of total
    iPercent = Round((lValue/lTotal) * 100) 
    str = str & " <TR><TD>" & request.queryString("label" & i) 
    str = str & "</TD><TD>&nbsp;</TD><TD align=center>"
    str = str & lValue & "</TD><TD>&nbsp;</TD>"
    str = str & "<TD valign=middle><TABLE><TR><TD bgcolor="
    ' Set bar color
    if iPercent>50 then 
      str = str & "darkgreen"
    else
      str = str & "darkred"
    end if
    str = str & "><IMG SRC='/gifs/s.gif' width=" & ((iPercent/100)*barSize) & " height=5>
    str = str & "</TD><TD><FONT SIZE=1>" & iPercent
    str = str & "%</FONT></TD></TR></TABLE></TD></TR>"
  end if
next
str = str & "</TABLE>"
response.write(str)
%>

Another approach for generating the HTML chart is to run scripts on the client. In our client solution, we created a BarChart object that exposes methods and properties for supplying the data and customizing the charts appearance. Next we show you the client solution.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.