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.
Feb 12, 2007View in Crawl 4
Also 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.
@ddn3d:|>|> GIF image: 8k|>|> CSS+HTML: 16kI 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.
derekdownsFeb 13, 2007
How 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.
swazoFeb 13, 2007
*histogram* ...
yongfookathomeFeb 13, 2007
Also 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.
dacheetahFeb 13, 2007
@ddn3d:|>|> GIF image: 8k|>|> CSS+HTML: 16kI 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.
sensibledriverFeb 13, 2007
Dugg. Good work.
pucoskFeb 13, 2007
Instead of reading Digg all day? ;)
mikehartorAug 16, 2007
Perfect post! I swear i saw it on freshmeat or somewhere else. <a class="user" href="http://coffeepages.blogspot.com">http://coffeepages.blogspot.com</a>