Stylesheets - Creating a bar-graph with CSS

Author

Creating a bar-graph with CSS

Robert Latest

2007-07-19, 6:19 pm

Hello,

I'd like to create a bar-graph in HTML/CSS that has a legend on the
left-hand side and "stacks" of bars of different colors and widths on the
right-hand side.

Below I've appended an HTML snippet for illustrations. The following things
are wrong with it:

1. The "width" property is not honored. That's no surprise, seeing how
"width" only applies to block-level stuff, but just how can I make a string
of different-width boxes? The old transparent GIF trick?

2. The table rows overlap into each other. Again, fixed with the transparent
GIF. But c'mon, this is 2007.

BTW, the only reason I'm using a table here is because I want the legends in
a separate column of fixed width.

Thanks for help/suggestions,

robert

----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test page</title>
<style TYPE="text/css">

</style>
</head>
<body>
<table>
<tr>
<td>Line1:</td>
<td><span class="x" style="width: 80px; background: yellow">a
</span><span class="x" style="width: 40px; background: red">b
</span><span class="x" style="width: 50px; background: blue">c
</span><span class="x" style="width: 60px; background: white">d
</tr>
<tr>
<td>Line2 (longer):</td>
<td><span class="x" style="width: 30px; background: yellow">e
</span><span class="x" style="width: 50px; background: red">f
</span><span class="x" style="width: 70px; background: blue">g
</span><span class="x" style="width: 10px; background: white">h
</tr>
</table>
</body>
</html>

Jukka K. Korpela

2007-07-19, 6:19 pm

Scripsit Robert Latest:

> I'd like to create a bar-graph in HTML/CSS that has a legend on the
> left-hand side and "stacks" of bars of different colors and widths on
> the right-hand side.

That's generally counter-productive, since it's more difficult than using a
nice little program to produce the graph as an image. When you have the
image, you can express the information content as text using the alt="..."
attribute. But if you used the HTML and CSS tricks, how would you present
the information in a manner that is accessible to colorblind people, or to
people using a greyscale monitor, or to people using a screen reader?

> 1. The "width" property is not honored. That's no surprise, seeing how
> "width" only applies to block-level stuff,

Indeed. You could use blocks together with floating or positioning. But it's
more difficult than using a nice little program etc.

> 2. The table rows overlap into each other.

I have no idea of what you referring to.,

> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

That does not conform to HTML specifications. And you should have posted a
URL, not a snippet of code.

> <style TYPE="text/css">
> " protectors were (purportedly) needed for browsers like
Netscape 2. These days, it's just minor obfuscation (and a potential risk if
you move to XHTML).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/