Comments on: Tables to Bar Graphs

By: rweait

rweait — Fri, 24 Mar 2006 18:36:57 +0000

I’ve been wrestling with horizontal bar charts, with arbitrary end-points. Have others seen a good way to do this? My efforts are in the link.

By: HubLog

HubLog — Thu, 23 Feb 2006 01:30:52 +0000

Scalable Bar Charts with Tables and CSS

Exerimenting with ways of representing data in XHTML, I tried to see if data in tables could be transformed into bar charts using CSS. Eric Meyer did a version of this a couple of months ago, but it uses absolute pixel placement of elements so doesn’t…

By: Davide Bocci in Un Passo al Giorno » Potere al web semantico

Davide Bocci in Un Passo al Giorno » Potere al web semantico — Thu, 12 Jan 2006 15:37:00 +0000

[...] Johansson pubblica un articolo menzionando le tecniche di Eric Meyer per ottenere degli istogrammi: una basata sulle tabelle [...]

By: Robert Wellock

Robert Wellock — Thu, 12 Jan 2006 10:57:36 +0000

Certainly, I say it is more appropriate to use the table format a simple bar-graph than the lists as it they represent tabular numeric data.

By: Paul Solecki

Paul Solecki — Thu, 12 Jan 2006 10:39:36 +0000

Tim, I get the same problem with the legend on FF 1.5 on Win XP.

But it’s fantastic :) I even have somewhere I could use it!

By: Tim McCormack

Tim McCormack — Wed, 11 Jan 2006 20:21:30 +0000

Excellent! There's one small glitch in the legend on FF 1.0.7 on my Ubuntu Linux machine. I took a screenshot.

By: Phillip Leftover

Phillip Leftover — Thu, 05 Jan 2006 13:51:30 +0000

Great stuff! I already designed some dynamic bar graphs with php…

By: torresburriel.com» Blog Archive » Lecturas sobre hojas de estilo y est

Thu, 29 Dec 2005 22:44:36 +0000

[...] esources/ozewai2005/ http://webstandardsgroup.org/audio/mp3/other-051209-1.mp3 Tables to Bar Graphs Star HTML and Microsoft IE7 Printing CSS background i [...]

By: Mikael Jervelind

Mikael Jervelind — Wed, 28 Dec 2005 14:32:56 +0000

My point wasn’t that it is difficult to calculate the values but rather simplify/enable the scaling of the graph in the browser (like Ctrl-+/- in Firefox). Furthermore it is easier to understand the values by looking at a value itself, 50% means the bar is halfwidth and you can see that by looking at just that value but if the html/css-code is saying that the bar is 237px you don’t know immediately how big it is, you must first look up the maximum width and compare.
It you are going to mix data and style information it is nice if the style code is self-explaining the same way we try to make the html markup code. I think percentage values are a lot easier to read and understand at a first glance.

By: PurplePenny

PurplePenny — Mon, 26 Dec 2005 16:28:44 +0000

Following on from Mikael’s comment, calculating the height doesn’t have to be difficult. Just treat a px as a square on graph paper: so in this example use 1px = $100; then you don’t need either a calculator or a server-side process for the maths.

(P.S. I know that I’m ignoring the fact that the point of the exercise is doing something spiffy with CSS but we *expect* that from you because you are the CSS spiffmeister.)

By: patrick h. lauke

patrick h. lauke — Mon, 26 Dec 2005 00:10:47 +0000

back in september 04 i did a little experiment with styled tables as bar charts. it was a fairly naive approach, and breaks quite spectacularly in IE...but that's due to my approach at the time. i could think of a few ways to make it work even in that stubborn beast now, and may well resurrect this little experiment in the next few days to make it a bit more workable.

By: draco

draco — Sat, 24 Dec 2005 16:53:05 +0000

The link to the comment id with regards to the “intrepid soul” update isn’t working from the main meyerweb.com.

Perhaps you should do an absolute path link instead.

By: Mikael Jervelind

Mikael Jervelind — Fri, 23 Dec 2005 10:11:35 +0000

Nice, but wouldn’t it be a better approach using percentage values for the size of the bars. Then you could easily change the size of the graph not only from the server side but also in the browser. Printing problably will be easier too.

By: Eric Meyer

Eric Meyer — Thu, 22 Dec 2005 21:26:05 +0000

Steve: it shall be so. Excellent idea.

By: Eric Meyer

Eric Meyer — Thu, 22 Dec 2005 20:20:41 +0000

Michiel: genius! And the big whitespace isn’t IE/Win’s fault; it’s an artifact of how I was setting up the ticks. Combined with Jan’s earlier negative margin-bottom trick, it should all come together quite nicely. Look for an updated demo soon.