The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.
Vertical Bar Graphs with CSS and PHP
terrill.ca — Who wants to use Excel to make a new graph each week? Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.
Viewel- 1890 diggs
- digg it
- kolofon, on 10/12/2007, -8/+2This is crazy.
- captainpete, on 10/12/2007, -1/+7It's cool, but definitely not a replacement for something like JPGraph.
- Razster, on 10/12/2007, -5/+11Now that is just some smooth and clean coding, makes me wish I had the time to actually use something like this for our Business.
Great work!- pucosk, on 10/12/2007, -1/+2Instead of reading Digg all day? ;)
- jtrost, on 10/12/2007, -4/+2Very nice implementation! Now I only wish that I had someplace to use this.
- headzoo, on 10/12/2007, -3/+4That's one of the best looking CSS bar graph implementations I've seen.
- jiminoc, on 10/12/2007, -4/+16finally something on digg that's useful again
- Kinsbane, on 10/12/2007, -1/+17I've always been partial to this:
http://meyerweb.com/eric/css/edge/bargraph/demo.html- terrill, on 10/12/2007, -1/+10Kinsbane, I like that too. Eric pioneered this concept, and was my inspiration for this tutorial.
- Kinsbane, on 10/12/2007, -1/+4terrill, your tutorial is very nice as well, and it takes to a couple more steps than Eric's - very bookmark-worthy!
- SteaminTmann, on 10/12/2007, -1/+4I did something similar for the "pipeline" section for a pharmaceutical company that is a client of my company, essentially this one works similarly, and it was built in to the content management system, along with control for the gradient (set the end color, and it steps down automatically), the phases, and the products, all through CSS, PHP & mysql.
If anyone's interested, its http://www.curagen.com/pipeline.php
(no, I'm not making any money off of it) - Philodox, on 10/12/2007, -1/+6This isn't actually dependent on PHP, but this is an awesome CSS tutorial overall.
- terrill, on 10/12/2007, -1/+2You are completely correct. I wanted to show people that the creation of the HTML could be automated also. PHP seemed like a good option.
- appletalk, on 10/12/2007, -1/+1"Well put, Alexx3k. A server would have a tough time standing up to the digg effect if had to create the image every hit."
Any serious stats library would support caching of images anyway.
Dugg for the beautiful shadows :P
- picklesbubbles, on 10/12/2007, -1/+0excellent
- fLUx1337, on 10/12/2007, -5/+2this is cool, but it can be done alot nicer with a dynamic PHP image...
- rchtr, on 10/12/2007, -2/+3Why not just make digg a giant .png while you're at it? Who needs HTML anyway?
- ellisgl, on 10/12/2007, -0/+2And most servers have GD 1/2 installed. That ended up being a memory hog. ImageMagick is a lot better on resources. But still CSS vs an Image - I think CSS wins on this becuase of file size and speed...
- yongfookathome, on 10/12/2007, -0/+2Also the way he's coded it, the page retains some semantic meaning even without all the styling - all his list elements have the bar chart value in them.
Thus, CSS/HTML pwns a static image in this case.
- morninglorii, on 10/12/2007, -1/+1This is perfect... we were just looking for a replacement for JPGraph at my work. Thanks for posting!
- csimpkins, on 10/12/2007, -2/+2Good effort. A neat trick, for sure.
A pop-up tooltip showing the value while hovering over a column might be nice, since the numbers are blocked in many places. - jonknee, on 10/12/2007, -1/+7It's sort of a waste to do it in CSS. It makes it hard for users to save the graph (they would need to do a screen cap) and doesn't offer an advantage over an image. You wouldn't have search engines crawling graphs for example, which is one of the big reasons CSS is usually superior to images.
The PHP is fairly clean, but I would definitely modularize it and not output HTML in the code. Have a function create an array of the data to be included into the template or templating engine. - ddn3d, on 10/12/2007, -11/+1Wow this is so clean and efficient.
Wait, no its not.
GIF image: 8k
CSS+HTML: 16k
Not to mention browser overheard to parse, stylize, and render.
This is idiotic.- Alexx3k, on 10/12/2007, -0/+5I think many people miss the point that these can be created on the fly, with very little server overhead.
It's an idea soloution for stats packages, constantly changing data or real-time graphs. With some lines of extra code and the mootools framework this could easily be adapted to output stastics in real time using ajax, or for monitoring stock prices etc. In many situations users have no wish to save data in it's presented form.
Unlike outputting many .gifs and cashing them on the server, it also degrades gracefully in a list of values when the css is removed, or it's viewed on a mobile platform.
So comparing an 8kb .gif to 16kb of code is meaningless, they have totally different applications. Obviously a static .gif would be better in some situations, but then you still have the problem of either the complex and high-load code to generate it server side, or the physical effort of photoshop before hand. - terrill, on 10/12/2007, -0/+5Well put, Alexx3k. A server would have a tough time standing up to the digg effect if had to create the image every hit.
- ddn3d, on 10/12/2007, -10/+1So its acceptable to offload the CPU cycles required from a server where you should have power to spare and you control the amount of resources available, to the client where there are any number of unknowns? Not on my web sites.
I never said anything about "saving data". I doubt many users ever try to save a graph image. I doubt many even know how.
Its not an ideal solution for anything, any time. It does not, by any means degrade gracefully into a list. Go ahead, try it. The first 3 numbers are 57, 27, 17. Is that representative of the data set? No, because you have no clue which is a row and which is a column.
And by your spelling of caching, its clear that you're out of your league in discussing performance specifics.
Oh and by the way, the graph is almost completely broken on Windows IE. I had a hunch, so I checked. - ddn3d, on 10/12/2007, -9/+1terrill, if you are creating the image on every hit: You. Are. An. Idiot.
- Alexx3k, on 10/12/2007, -0/+2I'm not a developer, I'm a designer - so no i don't have 'high level' experience of server loads and management (I spelled caching wrong, yeah). I don't know what IE version you have installed but on IE6 they display perfectly for me. I still see no advantage is getting the server to perform MUCH more work outputting and caching and image than just getting the browser to render CSS, if a page has more than 4 graphs you already have saved the client load time... and your server CPU load (especially in the case of shared boxes).... not to mention all the advantages of flexability.
(Though they don't degrade into a totally readable format I do admit, this is basically just down to poor coding, with some more work they could) - dacheetah, on 10/12/2007, -0/+8@ddn3d:
|>|> GIF image: 8k
|>|> CSS+HTML: 16k
I made a GIF, and saved the CSS+HTML, and both were ~7kB. The CSS+HTML version at 7kB also had more information, as a mouseover reveals the "title" tag for each column. (Strip that and the whitespace and it's going to be noticably smaller than the GIF.)
Your 16kB obviously came from saving the WHOLE page, which has the graph, a description of the graph, the code for the graph, twice, and anything else there.
|>|> Not to mention browser overheard to parse, stylize, and render.
Browsers still have to render the GIF after reading the bunch of 1's and 0's that represent it.
|>|> So its acceptable to offload the CPU cycles required from a server where you should have power to spare
|>|> and you control the amount of resources available, to the client where there are any number of unknowns?
Um, yes. Imagine a non-profit organisation (can't afford expensive super-servers) attempting to server 1,000,000 different graphs to 1,000,000 different people at the same time. Assume that the CSS takes the client 1ms to render, and the GIF takes the server 1ms to render. Would you prefer to have you own computer takes 1ms, which you wouldn't even come close to noticing, rendering the CSS, or would you like to wait in line as the othe 999,999 people get their GIFs leaving you waiting for over 15 minutes. There are plenty of cases where unloading a few CPU cycles to the client would be a HUGE advantage to both.
|>|> Its not an ideal solution for anything, any time. It does not, by any means degrade gracefully into a list.
|>|> Go ahead, try it. The first 3 numbers are 57, 27, 17. Is that representative of the data set? No, because
|>|> you have no clue which is a row and which is a column.
In many cases where CSS is unavailible, so are images. At least in context you could work out from these numbers what the graph should look like. And with slightly better coding, it could probably be made to fall into a legible list when CSS fails. When a GIF fails, you get nothing.
|>|> And by your spelling of caching, its clear that you're out of your league in discussing performance specifics.
Wow, you can tell what league someone is in based purely on a natural pronunciation based typo? Maybe you should be a shrink.
|>|> Oh and by the way, the graph is almost completely broken on Windows IE. I had a hunch, so I checked.
Ok. *fires up MSIE (v6.0.29)*. Wow you're right, it's completely broken. If by completely broken you mean a few colours (the shading) are slightly different. Otherwise it's identical. Work's almost perfectly if you ask me.
|>|> terrill, if you are creating the image on every hit: You. Are. An. Idiot.
What happens when every hit has different data? Real time data? Data for a specific user? There are plenty of cases where you have no choice but to render the image or CSS every single hit. There are plenty where you can cache an image and use it for a week, but that's not the point of the CSS graph.
Wow, that turned out a little longer than planned.
- Alexx3k, on 10/12/2007, -0/+5I think many people miss the point that these can be created on the fly, with very little server overhead.
- PAJK, on 10/12/2007, -4/+1I think this generates a lot of junk code. Javascript should be brought in to insert the CSS values.
- terrill, on 10/12/2007, -0/+2There is no reason why you need to bring the behaviour layer into this. No interaction, no Javascript. I fully understand the separation of design/content/behaviour theory, and I know this is mixing things up a bit, but it is done for simplicity's sake. I've experimented with using CSS to remove the need to specify the 'left' parameter, but so far I don't have a good solution. If anyone does find one, please let me know.
- AstralSin, on 10/12/2007, -2/+3VERY nice, i'll definitely use this code in upcoming projects
- stelt, on 10/12/2007, -3/+1Nice stuff, i'd use SVG though
- terrill, on 10/12/2007, -0/+3SVG graphs can be very beautiful, trouble is that IE kinda has problems with it. I had a pepper for Mint Version 1 that was really good looking. Hopefully there'll be another for version 2 soon.
- dvfreelancer, on 10/12/2007, -2/+2I have a project I can use this. Great timing!
- SecretSnack, on 10/12/2007, -1/+1Ditto! :)
- aftk2, on 10/12/2007, -3/+2Meh. For the extra sexy, go for:
http://www.maani.us/charts/index.php?menu=Gallery
(I'm not the developer, but we did just buy this app today.)- dacheetah, on 10/12/2007, -0/+1Meh, flash. That and if you have to buy it, it's too complex.
- dacheetah, on 10/12/2007, -0/+1Meh, flash. That and if you have to buy it, it's too complex.
- jiller, on 10/12/2007, -1/+2Serious Internet Business is going on here.
- tablatronix, on 10/12/2007, -1/+1ooh, dugg, if this is better than mine im replaceing all my graphs tomorrow.
- isilex, on 10/12/2007, -2/+2I vote for http://www.liquidx.net/plotkit/
- DerekDowns, on 10/12/2007, -7/+1How is this news? How is this the #4 article on the front page of digg? I mean, it's a good article and all, but I was doing this 3-4 years ago.
- swazo, on 10/12/2007, -2/+1*histogram* ...
- PaiTrakt, on 10/12/2007, -4/+2Meh, the code kinda sucks. Doesn't make any sense at all if you have CSS disabled. Then it's just a bunch of seemingly random numbers in a list.
- appletalk, on 10/12/2007, -0/+3Unlike Eric Meyer's approach, this is not semantically meaningful. Screen readers anyone? CSS disabled anyone?
http://meyerweb.com/eric/css/edge/bargraph/demo.html- Alexx3k, on 10/12/2007, -0/+1This is a much cleaner example of the frontend method, and demonstraits that they could be tweaked to degrade gracefully perfectly. Thanks for the link.
- terrill, on 10/12/2007, -0/+1You could easily massage the list into being very meaningful. For the purporses of a tutorial I thought it best to group all the bars in each column together. I could have just as easily grouped all the bars in each dataset together, nested them in a sub-list, styled the heck out of them, and end up with the same results... likely even better. The results would be a less obtainable though, some would see it just too complex to try out themselves.
Then there's always the case of the corporate intranet (which I originally developed these for) whose target audience is a very select few people, none of whom are blind.
- sensibledriver, on 10/12/2007, -0/+1Dugg. Good work.
- timwright12, on 10/12/2007, -0/+1another pretty flexible one here too:
http://www.csskarma.com/lab/
looks incomplete, but pretty easy to follow - mikehartor, on 10/10/2007, -1/+1Perfect post! I swear i saw it on freshmeat or somewhere else. http://coffeepages.blogspot.com
Browsing Digg on your phone just got easier with our enhancements to the 
© Digg Inc. 2008 — Content posted by Digg users is