How can you create a bar chart using ASP

We will use a small image and take advantage of the fact that the image will stretch to fit the dimensions given in the img tag: [see width="&CInt(db_rs("score"))*3] in the code where we set the image width to 3 times the score value. The *3 is simply to match the scale of our chart.

Also note the use of the parameterized SQL library which encapsulates the data access and performs extensive error handling.

<!--METADATA TYPE="typelib" uuid="00000205-0000-0010-8000-00AA006D2EA4" -->
<% 
Option Explicit
Session.CodePage=65001
Response.Charset="UTF-8"
%>
<!--#include virtual="include/paramSQL.asp"-->

Dim cmdTxt

cmdTxt = "SELECT name, score FROM scores;"
openCommand Application("examples"),"getScores 1"
getRS db_rs, cmdTxt, "getScores 2"

if NOT (db_rs.bof AND db_rs.eof) then
    Dim barchart1
    barchart1 = "<div style="&chr(34)&"position: absolute; width: 100px; height: 15px; "&chr(34)&"><div style="&chr(34)&"position: absolute; width: 300px; height: 15px; left: 115px"&chr(34)&"><img alt="&chr(34)&"A bar graphic"&chr(34)&" src="&chr(34)&"images/scale300.gif"&chr(34)&" width="&chr(34)&"300"&chr(34)&" height="&chr(34)&"15"&chr(34)&"></div>Bar Chart</div><br>"
    while not db_rs.eof
        barchart1 = barchart1 & "<div style="&chr(34)&"position: absolute; width: 100px; height: 15px; "&chr(34)&"><div style="&chr(34)&"position: absolute; width: 300px; height: 15px; left: 115px"&chr(34)&"><img alt="&chr(34)&"A bar graphic"&chr(34)&" src="&chr(34)&"images/1x15navy.gif"&chr(34)&" width="&CInt(db_rs("score"))*3&" height="&chr(34)&"15"&chr(34)&">&nbsp;"& db_rs("score") &"</div>"&db_rs("name")&"</div><br>"
        db_rs.movenext
    wend
end if
closeCommand
closeRS
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                    "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<title>bar chart ASP</title>
<style>
#chart {
    width:600px;
    margin-left:auto;
    margin-right:auto;
}
</style>

</head>

<body>
  <div id="chart"><%=barchart1%></div>
</body>

</html>

Except where otherwise noted, this site, all content, and all source code and markup is licensed under a Creative Commons License Creative Commons License.

No part of this web site including all application code and examples may be used for commercial purposes without prior written permission from the author, Roderick W. Divilbiss of Overland Park, Kansas, United States of America.

How can you create a bar chart using ASP?