Sent by Don A. Elbourne Jr. on 7 January 2003 14:02
The other day there was a discussion about bar charts. I decided to try my
hand at it, with a little different twist. I gave myself the challenge of
creating a liquid horizontal bar chart, generated on the fly using XHTML
Strict and CSS, without tables. Here is what I came up with.
http://elbourne.org/miva/browserchart.mv
First, I needed some data to populate my chart. Using Miva, I wrote a script
to grab the user agent information and store it in a database. If the
database is not familiar with the browser combination, it records the
string. If it does, it counts it. That was the simple part. the trick would
be to display the information in a meaningful way using XHTML and CSS.
On the XHTML side of things I wanted to semantically structure the
information appropriately. As the script steps through the database it
creates a <div> for each of the records with a unique id, browser1,
browser2, etc. All information concerning that particular database record is
housed within that div. A <span class="browsername"> and <span
class="browserhits"> contains the user agent information and how many times
the web page has seen it. Another div envelopes the dynamically generated
average and I give each one a unique id. A <div class="chart"> wraps around
the whole thing.
Then comes the CSS magic. Within the record div, I floated the text string
to the left and the hit count span to the right. Since each of the divs that
contain the average are unique, the script can generate the CSS on the fly
with the appropriate corresponding width percentage. Setting the background
to a color gives the appearance of a bar graph. Using the percentage
attribute makes the design liquid. Users with various screen resolutions and
browser window sizes will still have the CSS display according to the
percentage.
To make the chart a little more esthetically pleasing, I toggle the rows
back and forth with slightly different background colors using <div
class=evenrow"> and <div class="oddrow"> this has to be dynamically done
because the record number will always be changing. I spruced it up with a
little more CSS to come up with what you see at the link above.
I only tested it with the two browsers I have installed, Mozilla, and IE 6,
and checked it with the W3C HTML Validater. I do not know if my CSS will
present any problems to other browsers. I'm not a professional designer, I
just did this last night for fun and to see if I could do it. I'd appreciate
any advice, comments or criticism.
Don A. Elbourne Jr.
http://elbourne.org
