What is Digg?59 Comments
- Kinsbane, on 10/12/2007, -1/+17I've always been partial to this:
http://meyerweb.com/eric/css/edge/bargraph/demo.html - jiminoc, on 10/12/2007, -4/+16finally something on digg that's useful again
- terrill, on 10/12/2007, -1/+10Kinsbane, I like that too. Eric pioneered this concept, and was my inspiration for this tutorial.
- 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. - 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! - captainpete, on 10/12/2007, -1/+7It's cool, but definitely not a replacement for something like JPGraph.
- 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. - 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.
- Philodox, on 10/12/2007, -1/+6This isn't actually dependent on PHP, but this is an awesome CSS tutorial overall.
- 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. - 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) - 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 - 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.
- headzoo, on 10/12/2007, -0/+3You can try PlotKit, which uses JavaScript + (Canvas or SVG) to create real time graphs that don't use images.
http://www.liquidx.net/plotkit/ - 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!
- 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) - 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. - 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...
- 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.
- 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.
- sensibledriver, on 10/12/2007, -0/+1Dugg. Good work.
- 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. - AstralSin, on 10/12/2007, -2/+3VERY nice, i'll definitely use this code in upcoming projects
- 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.
- pucosk, on 10/12/2007, -1/+2Instead of reading Digg all day? ;)
- rchtr, on 10/12/2007, -2/+3Why not just make digg a giant .png while you're at it? Who needs HTML anyway?
- timwright12, on 10/12/2007, -0/+1another pretty flexible one here too:
http://www.csskarma.com/lab/
looks incomplete, but pretty easy to follow - headzoo, on 10/12/2007, -3/+4That's one of the best looking CSS bar graph implementations I've seen.
- jiller, on 10/12/2007, -1/+2Serious Internet Business is going on here.
- dacheetah, on 10/12/2007, -0/+1Meh, flash. That and if you have to buy it, it's too complex.
- tablatronix, on 10/12/2007, -1/+1ooh, dugg, if this is better than mine im replaceing all my graphs tomorrow.
- inactive, on 10/12/2007, -2/+2I have a project I can use this. Great timing!
- isilex, on 10/12/2007, -2/+2I vote for http://www.liquidx.net/plotkit/
- 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. - morninglorii, on 10/12/2007, -1/+1This is perfect... we were just looking for a replacement for JPGraph at my work. Thanks for posting!
- 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 - mikehartor, on 10/10/2007, -1/+1Perfect post! I swear i saw it on freshmeat or somewhere else. http://coffeepages.blogspot.com
- 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.) - picklesbubbles, on 10/12/2007, -1/+0excellent
- swazo, on 10/12/2007, -2/+1*histogram* ...
- inactive, on 10/12/2007, -3/+1Nice stuff, i'd use SVG though
- 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.
- jtrost, on 10/12/2007, -4/+2Very nice implementation! Now I only wish that I had someplace to use this.
- fLUx1337, on 10/12/2007, -5/+2this is cool, but it can be done alot nicer with a dynamic PHP image...
- 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.
- bramkok, on 07/02/2009, -8/+2This is crazy.
- 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.
- ddn3d, on 10/12/2007, -9/+1terrill, if you are creating the image on every hit: You. Are. An. Idiot.
-
Show 51 - 52 of 52 discussions
Digg is coming to a city (and computer) near you! Check out all the details on our 
© Digg Inc. 2009
— Content created and posted by Digg users is