Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side.

Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought we would share our solution and code in case anyone else ran against similar situations.

Update

I posted a live example page with everything in tact. So far I’ve only been able to test in Firefox 1.0.7, Firefox 1.5, IE 6, Safari 1.3.3, and Opera 9(TP1). You can view it here.

Basic CSS Bar Graph

This is a simple bar graph we developed for a tool we’re releasing shortly for our client. The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.

<style>
    .graph { 
        position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid #B1D632; 
        padding: 2px; 
    }
    .graph .bar { 
        display: block;
        position: relative;
        background: #B1D632; 
        text-align: center; 
        color: #333; 
        height: 2em; 
        line-height: 2em;            
    }
    .graph .bar span { position: absolute; left: 1em; }
</style>
<div class="graph">
    <strong class="bar" style="width: 24%;">24%</strong>
</div>

Complex CSS Bar Graph

This is a more complex visualization, yet still following the same basic idea. Here the graph is a ‘bad’ to ‘good’ indicator with a marker that travels the length of the color scheme. A lighter bar shade also helps indicate the marker position as it travels from left to right.

<style>
    dl { 
        margin: 0; 
        padding: 0;                     
    }
    dt { 
        position: relative; /* IE is dumb */
        clear: both;
        display: block; 
        float: left; 
        width: 104px; 
        height: 20px; 
        line-height: 20px;
        margin-right: 17px;              
        font-size: .75em; 
        text-align: right; 
    }
    dd { 
        position: relative; /* IE is dumb */
        display: block;                 
        float: left;     
        width: 197px; 
        height: 20px; 
        margin: 0 0 15px; 
        background: url("g_colorbar.jpg"); 
     }
     * html dd { float: none; } 
    /* IE is dumb; Quick IE hack, apply favorite filter methods for 
    wider browser compatibility */

     dd div { 
        position: relative; 
        background: url("g_colorbar2.jpg"); 
        height: 20px; 
        width: 75%; 
        text-align:right; 
     }
     dd div strong { 
        position: absolute; 
        right: -5px; 
        top: -2px; 
        display: block; 
        background: url("g_marker.gif"); 
        height: 24px; 
        width: 9px; 
        text-align: left;
        text-indent: -9999px; 
        overflow: hidden;
     }
</style>
<dl>
    <dt>Love Life</dt>
    <dd>
        <div style="width:25%;"><strong>25%</strong></div>
    </dd>
    <dt>Education</dt>
    <dd>
        <div style="width:55%;"><strong>55%</strong></div>
    </dd>
    <dt>War Craft 3 Rank</dt>
    <dd>
        <div style="width:75%;"><strong>75%</strong></div>
    </dd>
</dl>

Vertical CSS Bar Graph

In this third example, we utilize the same principle vertically and reproduce it multiple times to create a more complex graph. This particular solution was a relief the to client and engineer as all they had to do was calculate percentages, and the look of the graph was much better than their stock graphing component.

<style>
    #vertgraph {                    
        width: 378px; 
        height: 207px; 
        position: relative; 
        background: url("g_backbar.gif") no-repeat; 
    }
    #vertgraph ul { 
        width: 378px; 
        height: 207px; 
        margin: 0; 
        padding: 0; 
    }
    #vertgraph ul li {  
        position: absolute; 
        width: 28px; 
        height: 160px; 
        bottom: 34px; 
        padding: 0 !important; 
        margin: 0 !important; 
        background: url("g_colorbar3.jpg") no-repeat !important;
        text-align: center; 
        font-weight: bold; 
        color: white; 
        line-height: 2.5em;
    }

    #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
    #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
    #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
    #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
    #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
</style>
<div id="vertgraph">
    <ul>
        <li class="critical" style="height: 150px;">22</li>
        <li class="high" style="height: 80px;">7</li>
        <li class="medium" style="height: 50px;">3</li>
        <li class="low" style="height: 90px;">8</li>
        <li class="info" style="height: 40px;">2</li>
    </ul>
</div>

We hope you enjoyed our examples and find new uses and variations for the concept. Drop us a line if you have any other interesting visualizations using XHTML and CSS and we’ll post them here.

Published on November 21, 2005
Resides in CSS/XHTML

Comments feed | TrackBack URI

227 Responses to “CSS For Bar Graphs”

1. 1

   Matthew Anderson on November 22nd, 2005

   Nice. of course, it’s so obvious, now that you mention it I wish I would have that of that 2 years ago when I was tweaking that Crystal Reports web interface!

2. 2

   Timmargh on November 22nd, 2005

   Excellent! I feel the need to invent a reason to use these …

3. 3

   Watcher on November 22nd, 2005

   Yeah, so simple and obvious… when you steal the idea from an ex-coworker. Thanks for generously sharing this code you didn’t write.

4. 4

   Ryan Nichols on November 22nd, 2005

   ???

   Since each of these projects are all new and unreleased, and I haven’t worked with anyone outside of Apples To Oranges for nearly a year, I can’t imagine why you’d think we stole anything. I can barely remember past last week. (shrugs)

5. 5

   Baldo on November 22nd, 2005

   great css examples

6. 6

   Spencer Joplin on December 5th, 2005

   You should use relative measurement units (% and em) to create scalable charts for accessibility and flexibility. I think this is html/css charts’ greatest strength.

7. 7

   Ryan Nichols on December 6th, 2005

   Very true. This code was exact rips out of our client work. (hence the names of the images we used are still intact :)) Most of them reside in a fixed column, but I’m sure they could be adopted to completely scale.

8. 8

   Luke L on December 6th, 2005

   I used a system very simialar to this when I did a re-design for www.modstats.com.

9. 9

   topfunky on December 6th, 2005

   That’s awesome.

   A Ruby on Rails helper to generate this would be very useful.

   Puts on TODO list

10. 10

    Raanan Avidor on December 6th, 2005

    I think you’ve mixed .(classes) and #(ids) in the Basic CSS Bar Graph example.

11. 11

    Adi on December 6th, 2005

    Nice, but for some dynamic data it needs a dynamic css.

12. 12

    Loopion on December 6th, 2005

    Excellent !!! Really useful !

13. 13

    Ryan Nichols on December 6th, 2005

    Hey thanks!

    Raanan: Got it, fixed!

    Adi: You could probaby assign an id and include a stylesheet that is fed dynamically from the server. The stylesheet would have rules with all the correct values for that given graph.

14. 14

    Freddy on December 6th, 2005

    This is excellent! It’s funny you did that, because recently I was wondering how I could do somethin similar, but you saved me the trouble!

    Excellent stuff, really! cheers mate

15. 15

    Dave on December 6th, 2005

    Nice work and thanks for sharing!! In respect of the dynamic data, surely, as the method uses inline styles for the percentage, couldnt that be set as a variable? Or am i missing something?

    Thanks again.

16. 16

    Deny on December 6th, 2005

    aha.. this is a really nice css bar graph thanks a lot for sharing, guys.

17. 17

    boB on December 6th, 2005

    first example doesn’t work in Safari, unless I’ve mis-pasted and then mis-typed, and then re-mis-pasted/typed. Even tried wrapping it in a simple XHTML doc template.

18. 18

    Dan on December 7th, 2005

    I’ll echo boB’s remark and say that the first example doesn’t work in Safari - it also doesn’t work in Firefox. You’ve fallen into the trap of thinking that IE is the only browser that matters, guys…

19. 19

    Ryan Nichols on December 7th, 2005

    You sure about that? I just copied the first set of code, ploped it on a page and opened in FF. The application it came from also works in FF and Safari.

    Maybe I’ll make more of an official example page tomorrow and remove all the positioning style that we used for the project.

20. 20

    Dan on December 7th, 2005

    Yes, I’m sure. I tried with Firefox 1.0.7 for OS X, Safari 2.0.2, and Firefox 1.0.7 under Windows XP. Only IE displayed the graph correctly using the example given.

    I did make it work in all of them, though. Hopefully the posting software won’t mangle this example - if so, sorry. There’s no preview button Basically, I took advantage of the convenient 200px size of the div and figured that means 1% = 2px. So I take the %, multiply by two, and size the div in pixels rather than %. This works on all the browsers I tested.

    My example looks different than yours, but the principle is the same.

    .graph { width: 200px; } .graph .bar { text-align: center; line-height: 1.2em; }

    16%

21. 21

    Mike Ward on December 7th, 2005

    I did a very simple one of these just 3 weeks ago and I did indeed use a variable to control the bar width. I also set it to change colors at certain levels based on the variable (which ranges from 500 to 850).

    Here is the css for the graphic bar;

    graph {

    <% if Request.queryString(”barWidth”) < 900 then%>

    background: #390;
    <%end if%>
    <%if Request.queryString(”barWidth”) < 700 then%>
    background: #FF0;<%end if%>
    <%if Request.queryString(”barWidth”) < 575 then%>
    background: #F00;
    <%end if%>
    margin: 8px 0 0 0;
    padding: 0;
    height: 20px;
    width: <%=(Request.queryString(”barWidth”)-500)%>px;
    filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;
    }

    It probably could have been even easier but I did it quick.

    If anyone is interested in seeing the entire thing just let me know.

22. 22

    Mike Ward on December 7th, 2005

    I posted the example if anyone is interested;

    http://mikewarddesign.com/demo/bargraph.asp?barWidth=600

    Change the last three digits to anything between 501 and 849.

23. 23

    Kim Fransman on December 7th, 2005

    Nice! Im using a simular approach in a meeting room booking service, where i use javascript to calculate the width and position in a calendar.

    but now that i saw this im thinking og taking more advantage in the power of css.

24. 24

    Paul on December 7th, 2005

    Tip: use script.aculo.us (http://script.aculo.us) to make the bar graphs really dazzle. People will think it’s Flash, and that ain’t bad.

25. 25

    ben scott on December 7th, 2005

    thought this is a great idea and got round to collecting a few links that are of use for many academics (science infomatics)

    some of these links need firefox as they are rendering in CSS3

    http://apples-to-oranges.com/blog/article.aspx?id=55 bar graphs

    http://andreas.web-graphics.com/footnotes/#ftn1 footnotes in css3

    http://www.brandspankingnew.net/specials/footnote.html#note1 footnotes in css2

    http://www.surfare.net/~toolman/temp/diagram.html CSS diagrams

    http://meyerweb.com/eric/tools/s5/ slideshow like powepoint http://www.robertnyman.com/2005/11/13/proudly-presenting-ajax-s/ done with xml as well

    http://www.cssplay.co.uk/menu/old_master.html image maps for rollover information

    http://www.ericmeyeroncss.com/projects/13/ some useful styles for getting a web document to look like a book (sit archives as bottom of page)

    http://www.alistapart.com/articles/boom printing it all up as a book at the end

26. 26

    Ryan Nichols on December 7th, 2005

    Paul: Not a bad idea. I just updated with a live working sample. I’ll add an animation effect to them as an experiment.

27. 27

    Anders Floor on December 7th, 2005

    FYI, my Internet Explorer 6.0 crashed (no response) when loading this page. Tried it again and again it crashed (no response).

    Specs: WinXP SP2 IE 6.0.2900.2180.xpspsp2gdr.050301-1519

    Of course Mr Gates should be blamed for this but with over 80% of the web users still using Internet Explorer, it’s a serious issue. Unfortunately I don’t have time to debug the code to find out what’s causing the crashes.

28. 28

    max on December 7th, 2005

    I tried something akin to this for a really lame CS course last year. We had to do a poll. I made scaleable CSS result bars.

    http://www2.cems.uvm.edu/~mlawton/cs148/assign4/index.html

    Enjoy. Anyone’s welcome to steal every last bit of it if they want. Sorry I forgot to share the source code for this assignment.

29. 29

    Son Nguyen on December 7th, 2005

    For IE, if the % is small, the bar will be the same between say 10% and 0.1%

30. 30

    proph3t on December 7th, 2005

    Implemented my own version of this on my site, http://www.gamegum.com

    Thanks for the help, I never thought of this for some reason. To see it on the site you will need to login though.

31. 31

    proph3t on December 7th, 2005

    Yeah, noticed that in IE the bar visually wont go smaller than the width of the percent text inside it.

32. 32

    Ryan Nichols on December 7th, 2005

    Ah, yeah ok. We already tackled that issue in the app a few days ago. I’ll update the example code. Thanks!

33. 33

    Me on December 8th, 2005

    Nice.

    The first and the third example aren’t very accessible thou. The data is only useful, if you can read the text on the background images. If you are blind or a search engine robot, you can’t. Not recommended.

34. 34

    Oren T on December 8th, 2005

    How about using slants for creating 3D bars?

    http://www.infimum.dk/HTML/slantinfo.html

35. 35

    Martin (fv) on December 8th, 2005

    I noticed Mozilla (Gecko) has serious issues with percentages near ANY_NUMBER.5 %. Absolute positioning from the bottom goes nuts (the bar is 1px higher then others). I had to check for this and change (truncate) the value.

    Besides I used tables with divs positioned relatively agains td’s. Thus I could set widths and spaces within css, not server-side code.

36. 36

    Jo on December 8th, 2005

    allthough you’re blog layout “crashes”; the bar graph examples get displayed nicely in IE5.5

    Very nice work

37. 37

    Ryan Nichols on December 8th, 2005

    Thanks!

    The blog layout and the crashing is probably due to using Dean Edwards IE7 scripts. It’s tests ok with our IE 6, but with the wizardry going on in that script I wouldn’t be surprised if it wasn’t 100% stable.

    I have to admit though, it was like a dream to be able to use the full power of CSS and not worry about IE rendering improperly. (but I guess crashing!) One day it will be a reality

38. 38

    Justin Greer on December 8th, 2005

    These are beautiful! Perfect for some of the stats systems we’re putting together.

    However, I’ve been looking at that last example — the vertical bar graphs, and something bothers me about it. The fact that you’re using pixels rather than percentages for those bars. (Then again, there’s the fact that the “8″ bar is more than half the height of the “22″ bar.)

    Anyway, I’ve done some hacking on it, and figured out that you can put a “graph area” div in there that’s used as a basis for scaling the bars themselves (since it is the size of the actual area where the graph bars go). Then you can set the scale of the UL to 100% and make it positioned, so the height of the LI elements can be a percentage of it.

    What’s especially nifty about it is that if you make the UL absolute positioned on the bottom, and set the graph area to hide overflow, you get to then scale the graph to an arbitrary max height by simply setting the height of the UL in its style attribute. (So to make the max height be 22%, you’d set the UL height to 100/0.22 = 454% — one calculation, not one per bar.)

    So… With all that, you want to see an example, right? I put up a little post showing the full source and an example: http://groups.apu.edu/webcave/archives/14/

39. 39

    tamster on December 8th, 2005

    Seems to be working on Opera too (9.0 TP1)..

40. 40

    q00p on December 10th, 2005

    Opera 8.51 works fine as well…

41. 41

    Bill on December 10th, 2005

    Kudos! That’s a neat piece of css code! What I would add to it is a script to automatically generate the graph code for both the screen and the printer. I’m sure a lot of people want the ability to print the whole graph with colors, bells and whistles.

42. 42

    Linklog on December 10th, 2005

    CSS Bar Graph is used in Drupal 4.6.4’s polls.

43. 43

    Justin Shearer on December 10th, 2005

    I just was faced with the same type issue. Except I had to go a bit further. I had to make it where the value could be changed on the fly. http://justinshearer.com/AJAX/slider/ It will eventually be tied into some type of ajax/java application I am contributing on at work.

44. 44

    Lorelle on December 10th, 2005

    I created simple CSS bar graph experiments at http://www.cameraontheroad.com/index.php?p=159 a long time ago, creating interesting backgrounds as well as charts, and you can find more similar designs at Web Page Design for Designers: Drawing with CSS ( http://www.wpdfd.com/editorial/wpd0104review.htm ) that are lovely.

45. 45

    karlo on December 10th, 2005

    echt fettisch.de!

46. 46

    proph3t on December 10th, 2005

    Anyone find a fix to the problem in IE in which it displays any percantage that is visually smaller than the actual width of the text inside that bar to be as big as that text?

47. 47

    miscblogger on December 10th, 2005

    hey thats pretty nifty. i ought to use it for my next web design.

48. 48

    Ryan Nichols on December 11th, 2005

    Thanks!

    proph3t: Yes! I updated the above code and the live example page to fix the issue. It involves adding extra markup to do it, but it works.

49. 49

    Weiran on December 11th, 2005

    Excellent design! The complex CSS bar graph is extremely well done! With the number of really inaccurate dynamic bar graphs you see on the net, its a wonder no-ones thought of these before.

    FYI: they work perfectly in Opera 8.51.

50. 50

    Stu Nicholls on December 12th, 2005

    I produced this method back in July using a standard definition list.

51. 51

    Stu Nicholls on December 12th, 2005

    Sorry, missed the url http://www.cssplay.co.uk/menu/barchart.html

52. 52

    demimismo on December 12th, 2005

    Nice!

    I have done an alternative using unobstrusive Javascript http://www.mildiez.net/archivos/2005/12/12/graficos-de-barras-con-css-y-javascript/

53. 53

    Viktor on December 19th, 2005

    Great stuff, but there is alot of code for making a thing that you can do with php 2d.

54. 54

    Darcie on December 20th, 2005

    I have been working on this for over a year. You have some nice code, nice designs. I have been developing the code so it can be LESS so its more so to speak.

    I have examples littered throughout my site and blog … http://swatchnot.hender-son-s.com/percentbars.html http://swatchnot.hender-son-s.com/blog

    Does it validate? I am asking about the first sample.

    I notice you use . not # If one was to use more than one marker on a page, would it still validate? My tests have not worked so far. Each project requires its own # and I have not had much luck with .

    KUDOS

55. 55

    Jonny on December 21st, 2005

    Great. Love these charts, however I can’t get the vertical bar chart to display correctly if it has a value less than about 10% in IE. The other charts seem to work fine. Any ideas?

56. 56

    Ryan Nichols on December 28th, 2005

    Stu Nicholls - Nice examples. But what’s with the use of the >b< tag?

    demimismo - That’s a good addition to keep it all client side. It’s often real nice to tell engineers ‘Just spit it out in a unordered list, I’ll take it from there.’ They tend to like that too

    Jonny - You’re right. Follow the IE hack on the basic bar graph. You have to wrap the data in a dummy

57. 57

    John on December 28th, 2005

    Excellent article!

58. 58

    Evadman on December 30th, 2005

    With the rendering problem in IE: You can ’stack’ 2 li elements, one with the color, one with the text, and use a negative margin to position the elements on top of one another. background Color element first, then text element, or the bar color will be over the text. You can also use the Z axis.

59. 59

    Stefan on December 31st, 2005

    great idea … i’ve always used an image and played with its width, but i think i’m gonna try it with styles next time

60. 60

    Denis on December 31st, 2005

    awesome stuff ! Have a small project that needed this type of graph.

61. 61

    Leftovers on January 3rd, 2006

    Really nice stuff, I already designed some dynamic bar graphs with php.

62. 62

    gshack on January 7th, 2006

    really great! i start to wonder if there is a way to make graphs using css as i am about to add one to my current project; just in time. thx.

63. 63

    topfunky on January 11th, 2006

    A helper for Ruby on Rails in now available:

    http://nubyonrails.topfunky.com/pages/css_graphs

64. 64

    geewj on January 11th, 2006

    Thanks for the tutorial. It helped a lot!

    I added one thing to the last graph that people might use.

    on g_colorbar3.jpg I used a gradient of a color from light to dark. I made mine about 4 times the height I expect my largest bar to be.

    and then on this line…

    vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }

    and assuming you bar was at 50% of the graph change it to..

    vertgraph li.critical { left: 24px; background-position: 0px 50% !important; }

    This will adjust the the background vertically by 50%, so the smaller bars will have a darker background.

65. 65

    abator on January 17th, 2006

    Great article! I will use it in my next project. Thank You!

66. 66

    Cyril on January 17th, 2006

    It is nice indeed.

    But for the vertical graph, I’m screwed if I don’t apply the CSS, as the ‘critical’, ‘high’, etc. information is a CSS class…

67. 67

    Dan on January 20th, 2006

    Just wondering if anyone has attempted to create a graph using embbeded lists? For example:

    
    
    Montreal
    55
    15
    
    
    
    Toronto
    25
    60
    
    
    
    

68. 68

    JP on January 20th, 2006

    i cant get the bars to print on the printer, is there a way to correct this problem?

69. 69

    XoticStar on January 26th, 2006

    tHx 4 dá TiP!¡

    Check this Mega PHP souRce for generate MegaNice graph bars !¡…

    http://www.graphpico.com/

    totally GPL License ¡¡

70. 70

    fabien. on January 27th, 2006

    Great article. I have used it on my website, if you wanna see its implementaion(s) : http://www.feub.net/ (scroll at the bottom) and in the Ailleurs part : http://ailleurs.feub.net

    Thank you ! f.

71. 71

    Roman Reisenberger on February 2nd, 2006

    great css examples!

72. 72

    ANGEL on February 18th, 2006

    Excelent, it`s a good solution

73. 73

    martin on February 18th, 2006

    maybe you should change in the first example “span” for “strong” in css code.. mwhahaha nobody noticed

74. 74

    Ninjaplease on February 21st, 2006

    Hello all,

    I was able to implement the second complex graph using similar images in place of gmarker, gcolorbar, etc.

    However, my gmarker keeps overwriting the colorbar giving a white gap along the sides of the gmarker’s thin middle black line.

    How would I make it so that the g_marker drawing doesn’t completely overwrite the colorbar and insert the white areas?

75. 75

    web dude on February 28th, 2006

    Wow this is great but has anyone had a go at creating a pie-chart? Is this possible?

76. 76

    Mr. Khmerang on March 9th, 2006

    An alternative approach if you need to have printable graphs: http://www.khmerang.com/index.php?p=118

77. 77

    rweait on March 24th, 2006

    Your examples are beautiful, and funny. I’ve been trying to extend this to apply to tables with arbitrary end-pooint data, as shown in the link. Am I missing the obvious?

78. 78

    Marko on March 28th, 2006

    Very nice. I guess you don’t need Photoshop to drow

79. 79

    Comin on April 5th, 2006

    Good, but for some dynamic data it needs a dynamic css. Ty !

80. 80

    chris on April 7th, 2006

    man fuck yall

81. 81

    Anil on April 15th, 2006

    Thnx for the bar chart, I was searching for a level meter, which shows in realtime the depth of a queue(JMS). I used your bar graph and AJAX + servlet to do this, everything worked fine and i can see indicator going up and down as i flood and drain the queue in real time. The only issue was a flckering as the chart is reloaded every 2 seconds, can we make it more lightweight so that the motion can be fluid?

82. 82

    Philip on April 21st, 2006

    Loves it!

    Made it dynamic with a bit of PHP and MySQL…very nice.

83. 83

    Samantha on April 21st, 2006

    Pure beauty! The graph works great on Opera 8.54 for Windows.

84. 84

    Bryan on April 22nd, 2006

    Anil.. I believe you can use a few of the effects from script.aculo.us to give your site a slightly better transition of your graphs

85. 85

    nuther web dude on May 8th, 2006

    web dude - yes, I believe pie charts are possible, based on Eric Meyer’s slantastic code: http://www.infimum.dk/HTML/slantinfo.html

86. 86

    klaas debeuf on May 11th, 2006

    i’m having problems with the vertical bars in IE6.0 , I’m designing a poll with de css_graphs plugin in Ruby on Rails. i’m loading the graph with ajax and the data , when i check the sourcecode IE doesn’t load the < style>..< /style> ,so the graph isn’t shown , only the data , in firefox it just works fine. Somebody know any solution or had the same problem?

87. 87

    Jini Jose on May 12th, 2006

    fine i like the bar graph thank u

88. 88

    melanie on May 31st, 2006

    i need data for a graph

89. 89

    frank mati on June 4th, 2006

    i love graphs

90. 90

    Alex Paul on June 7th, 2006

    Wow! nice graph. Thanks..

91. 91

    BalusC on June 15th, 2006

    Another examples for CSS graphs: http://balusc.xs4all.nl/srv/sta-srv.php (vertical) http://balusc.xs4all.nl/srv/sta-srv-pag.php (horizontal)

92. 92

    Barbara on July 20th, 2006

    Great work!
    My homepage | Please visit

93. 93

    Vicky on July 20th, 2006

    Nice site!
    http://xssfkzfm.com/txku/mapb.html | http://wrieamep.com/gwxd/ihbz.html

94. 94

    TipClique Tutorials - Drixer on July 26th, 2006

    Thanks for the great tutorial Ryan, it has been linked to by my site “TipClique Tutorials”:http://www.tipclique.com. I hope to see more in the future.

95. 95

    Daniel on August 4th, 2006

    I note your article only one point because link demo is broken. That teach you a lesson !

96. 96

    das on August 6th, 2006

    das

97. 97

    » Diagramme und Charts erstellen: wie und wo? - Dr. Web Weblog on August 6th, 2006

    […] CSS For Bar Graphs beschreibt einen weiteren Ansatz für die Erzeugung der Graphen mit CSS und XHTML. […]

98. 98

    Imran Hashmi on August 15th, 2006

    Excellent work

99. 99

    Ionut Marinescu on August 16th, 2006

    great job but please fix the example link

100. 100

     Ryan Nichols on August 18th, 2006

     Example link fixed! Sorry for that…

     Daniel can we get our points back now?

101. 101

     Stephan Miller » CSS Bar Graphs on August 19th, 2006

     […] Apples To Oranges – San Francisco Bay Area Visual and Experience Design Studio […]

102. 102

     James on August 19th, 2006

     All of these examples also work in Konqueror 3.4.3

103. 103

     Brandon on August 19th, 2006

     The Complex CSS Bar Graph would be a wonderful complement to script.aculo.us drag’n'drop. That could open up an amazing amount of possibilities for client-tweakable UIs, generated on the fly.

104. 104

     Glow in the Dark · links for 2006-08-19 on August 19th, 2006

     […] CSS for bar graphs (tags: tutorial css webdev WebDesign) […]

105. 105

     Brendan on August 19th, 2006

     Very cool!

     Can change dynamically, too:

     ” onClick=”x = document.getElementById(’me’).style; document.getElementById(’me2′).innerHTML = x.width = parseInt(x.width.replace(’%', ‘ ‘))+1+’%';”>

                         <strong id="me" class="bar" style="width: 8%;"><span id="me2">8%</span></strong>
     
                     </div>
     

106. 106

     Brendan on August 19th, 2006

     Attempt2.

                         <strong>8%</strong>
     

107. 107

     Brendan on August 19th, 2006

     third and final attempt:
     

     8%

108. 108

     Joaquín Cuenca Abela on August 20th, 2006

     Nice graphs!

     I used a similar approach a while ago to show a progress bar when you upload a file.

     To me the best part of making it with HTML + CSS is that you can change them dynamically.

109. 109

     10 daily things » CSS For Bar Graphs on August 20th, 2006

     […] Here are 3 brilliant examples of Bar Graphs made using CSS. Basic CSS Bar Graph […]

110. 110

     Dave P on August 21st, 2006

     With all due respect, this is a horrible idea, for the following reasons:

     1. A bar graph is a table, so there is already a structure available.
     2. In each example, there is information conveyed through CSS that should be conveyed exclusively in the content. Example: style="width: 24%; This violates the separation of content from presentation, and therefore the whole purpose of using CSS in the first place.

     I think it’s a great piece of coding, but I’m concerned that this is just using CSS for CSS’s sake.

111. 111

     Ryan Nichols on August 21st, 2006

     Dave -

     I can understand where your coming from with your comments. I’m not sure I agree with a table containing the structure of a definition list though. The fine points as to what markup to choose really are, well, fine points.

     When it comes to choosing to do this in CSS versus images, as we stated earlier, it’s about the best overall solution given the factors of time and difficulty. For our work, it was a really simple way to get what we needed that looked good and didn’t require creating dynamic images.

     In terms of including an inline style attribute. You’re right, it’s not ideal. We’re very pragmatic when it comes to these kinds of decisions. I’ll always go with best practices and ideals, but in real world situations, I’ll choose the most practical approach for the problem I’m faced with. Hence we didn’t flinch at including the style attribute dynamically in the XHTML.

112. 112

     cssdesign.dk » Arkiv CSS Quicklinks (02/2006) on August 27th, 2006

     […] What with standardists ruling the web trends scene right now, the emergence of a new specification template for CSS is bound to be a major point of consideration in future endeavors. It is not, however, going to be remembered as the be-all and end-all of web design in the current web culture. http://fadtastic.net/2006/08/20/css3-what-it-means-and-what-it-doesnt/ List-u-Like CSS Generator af BrothercakeBut what if you had a tool that gave you detailed control over the appearance of a navigation list, and took account of browser variations itself - so that all you had to do was design it, and the exact CSS would be written for you..? http://www.listulike.com/ CSS for bar graphs af Apples to OrangesThis is a simple bar graph we developed for a tool we’re releasing shortly for our client. The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph. http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55 CSS Inheritance af David DorwardMany newcomers to CSS are confused by inheritance; this is often because they come from a background in object oriented (OOP) programming and expect CSS to work in a similar way. […]

113. 113

     Frazzled Faery » Blog Archive » Resource: CSS Links on August 28th, 2006

     […] Clearance Ten CSS Tricks You May Not Know Updated Simple CSS Tabs My Top Ten CSS Tricks CSS for Bar Graphs Adding a stylesheet to RSS CSS Shorthand Guide CSS Transparency Ten Common CSS Mistakes Block Hover Effect for Links Son of Suckerfish Dropdowns Turning a list into a navigation bar Accessible “more” links v2 footerStickAlt […]

114. 114

     feha on September 4th, 2006

     Thank You for great tips.
     I used your idea to create a CSS based PageRank Graph.

     Take a look at:
     http://www.vision.to/CMS/Home/index.php?pid=294

     (better than rendering images

115. 115

     Smashing Magazine | a magazine for web-designers » List of nifty tools and diagrams on September 10th, 2006

     […] “CSS For Bar Graphs“ describes another approach for presenting graphs with CSS and XHTML. […]

116. 116

     » CSS Quellensammlung CSS - Dr. Web Weblog on September 12th, 2006

     […] CSS FOR BAR GRAPHS Basic CSS Bar Graph, Complex CSS Bar Graph, Vertical CSS Bar Graph […]

117. 117

     UX Study | 油茶研究会 » Blog Archive » 一些用来画图表或流程的好工具 on September 18th, 2006

     […] “CSS For Bar Graphs” describes another approach for presenting graphs with CSS and XHTML. […]

118. 118

     Link CSS e AJAX at MyHTML.it on October 4th, 2006

     […] CSS Bar Graphs […]

119. 119

     otro blog m�s » Unos cuantos de desarrollo web (XCIX) on October 11th, 2006

     […] Comencemos con CSS. En el Developer Center de Adobe, un tutorial para el diseño de un layout de tres columnas. Más interesante, un hack para distinguir navegadores, unos gráficos de barras o unos “frames” en CSS. Y una recomendación interesante: cómo crear una guía de estilo para tu sitio. Para cerrar sección, un clásico de la casa: ¡bordes redondeados! […]

120. 120

     Kevin on October 13th, 2006

     Hai guys, thought these things could use some animation, ya know, take em to the next level

     http://stickmanlabs.com/2006/10/13/animated-javascript-css-graphs

     Enjoy!

121. 121

     » CSS: Techniques, Tutorials, Layouts » Smashing Magazine | modern magazine for web-designers and developers on October 25th, 2006

     […] CSS FOR BAR GRAPHS Basic CSS Bar Graph, Complex CSS Bar Graph, Vertical CSS Bar Graph […]

122. 122

     raghavendra on November 10th, 2006

     this is a nice work.
     i have the data in my excel sheets.
     i have to represent that data in bar charts in the browser preferable internet explorer..

     can you please send some sample code to represent excel sheets data in the form of bar charts in the browser.

123. 123

     raghavendra on November 10th, 2006

     its great to draw bar charts like this.
     i have the data in excel sheets.
     i have to represent that data in the form of bar charts in internet explorer.
     my email id is ds_raghavendra@yahoo.com
     please help me regarding this issue

     regards
     raghavendra

124. 124

     ilovesing.com » Archive » CSS相关资源网站 on November 10th, 2006

     […] CSS FOR BAR GRAPHS Basic CSS Bar Graph, Complex CSS Bar Graph, Vertical CSS Bar Graph […]

125. 125

     mellowswing on November 10th, 2006

     Hello,
     I was reading your example and i was wondering what was span all about there in the CSS (for the first example) , you forgot to put it in the xhtml ,it should be :
     ”
     24%
     ”
     Nice work anyway

126. 126

     apan’s Watching » links for 2006-11-23 on November 23rd, 2006

     […] CSS For Bar Graphs 归类于： .net — apan @ 11:20 pm […]

127. 127

     BlogMyth|博客神话之设计类博客 » Archive » css相关资源网站 on November 23rd, 2006

     […] CSS FOR BAR GRAPHS Basic CSS Bar Graph, Complex CSS Bar Graph, Vertical CSS Bar Graph […]

128. 128

     Andrew MacKinnon on November 28th, 2006

     I’ve copies and pasted the code without any modifications but whenever it is displayed I keep getting the bullets from

129. . It doesn’t show up on yours here or with your live examples so it’s not a browser issue.

Any idea what could/would be causing this?