HTML charting in ASP - basics
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.
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>
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>
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:
The page result is the next chart:
for 'Create html bar graph in ASP/VBSscript' articleHTML stacked bar graph in ASP/VBSscriptFunctions with full source code to creare simple stacked bar chart 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.
2. Link this sample from you page.
<A Href="http://www.motobit.com/tips/detpg_html-bar-graph-chart/" Title="Functions with full source code to creare bar charts from an ASP page." >Create html bar graph in ASP/VBSscript</A>
© 1996 - 2013 Antonin Foller, Motobit Software | About, Contacts | (Find us on Google+)
Partner sites: Search Czech Last minute Zajezdy Obsah na mobil Hry na mobil Java Hry Print-shop Affiliate programy
|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.|