Monday, October 15th, 2007
CSS Vertical Bar Graphs
Category: CSS
Eric Meyer has been keeping a secret since 2005 about CSS Vertical Bar Graphs. Well, not really, but it is good that he has come out with a nifty demo on how you can make this:
HTML:
-
-
<table id="q-graph">
-
<caption>Quarterly Results</caption>
-
<th></th>
-
<th class="sent">Invoiced</th>
-
<th class="paid">Collected</th>
-
</tr>
-
</thead>
-
<tr class="qtr" id="q1">
-
<th scope="row">Q1</th>
-
-
</tr>
-
<tr class="qtr" id="q2">
-
<th scope="row">Q2</th>
-
</tr>
-
<tr class="qtr" id="q3">
-
<th scope="row">Q3</th>
-
-
</tr>
-
<tr class="qtr" id="q4">
-
<th scope="row">Q4</th>
-
</tr>
-
</tbody>
-
</table>
-
-
<div id="ticks">
-
-
</div>
-
i.e. a bog standard table with some divs, and make it look like this:
3.5 rating from 50 votes
Looks like that in Firefox, in IE is looking different :)
but still nice :)
In IE it looks like a buggy output. We all know that IE ***** and all that, but how about 80% of users?
I was pretty sure he got it working in IE. If IE7 works but not IE6, it would be due to him using the Dean Edwards’ JS upgrade trick.
Eric brought up this CSS Vertical Bar Graph (which can easily be turned into a horizontal bar graph) at AnEventApart, and you can see my write-ups of Day One and Day Two.
It’s just because of the png’s he uses, if you’d use gif’s there wouldn’t be a problem in IE. Nice graph though.
It’s not a secret, but I’ve seen it few months back and just because I need vertical bargraph :) So if somebody need such thing he will find it very easy on the net :D
I followed the trail, some of the stuffs in the comments to his “credits due” page too and MAN I was impressed how people could tune HTML, CSS and JS…!
Hint; Google for “slants”… ;)