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:

  1. <table id="q-graph">
  2. <caption>Quarterly Results</caption>
  3. <thead>
  4. <tr>
  5. <th></th>
  6. <th class="sent">Invoiced</th>
  7. <th class="paid">Collected</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr class="qtr" id="q1">
  12. <th scope="row">Q1</th>
  14. <td class="sent bar" style="height: 111px;"><p>$18,450.00</p></td>
  15. <td class="paid bar" style="height: 99px;"><p>$16,500.00</p></td>
  16. </tr>
  17. <tr class="qtr" id="q2">
  18. <th scope="row">Q2</th>
  19. <td class="sent bar" style="height: 206px;"><p>$34,340.72</p></td>
  20. <td class="paid bar" style="height: 194px;"><p>$32,340.72</p></td>
  21. </tr>
  22. <tr class="qtr" id="q3">
  23. <th scope="row">Q3</th>
  24. <td class="sent bar" style="height: 259px;"><p>$43,145.52</p></td>
  26. <td class="paid bar" style="height: 193px;"><p>$32,225.52</p></td>
  27. </tr>
  28. <tr class="qtr" id="q4">
  29. <th scope="row">Q4</th>
  30. <td class="sent bar" style="height: 110px;"><p>$18,415.96</p></td>
  31. <td class="paid bar" style="height: 195px;"><p>$32,425.00</p></td>
  32. </tr>
  33. </tbody>
  34. </table>
  36. <div id="ticks">
  37. <div class="tick" style="height: 59px;"><p>$50,000</p></div>
  39. <div class="tick" style="height: 59px;"><p>$40,000</p></div>
  40. <div class="tick" style="height: 59px;"><p>$30,000</p></div>
  41. <div class="tick" style="height: 59px;"><p>$20,000</p></div>
  42. <div class="tick" style="height: 59px;"><p>$10,000</p></div>
  43. </div>

i.e. a bog standard table with some divs, and make it look like this:

CSS Vertical Bar Graphs

Posted by Dion Almaer at 7:39 am

3.5 rating from 56 votes


Comments feed TrackBack URI

Looks like that in Firefox, in IE is looking different :)

but still nice :)

Comment by — October 15, 2007

In IE it looks like a buggy output. We all know that IE ***** and all that, but how about 80% of users?

Comment by Max Shirshin — October 15, 2007

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.

Comment by killerog — October 16, 2007

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

Comment by Nik Chankov — October 16, 2007

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”… ;)

Comment by Thomas Hansen — October 16, 2007

Leave a comment

You must be logged in to post a comment.