homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Dynamic bar chart
CSS magic for survey summaries

WebmasterWorld Senior Member 10+ Year Member

Msg#: 541 posted 7:42 pm on Jan 17, 2003 (gmt 0)

Lurking here for several months has given me the courage to try to create dynamic bar charts with CSS. These bars show the percentage that each response was chosen for a given question: i.e., for question #1, response A got 42%, response B got 17%, etc.

I've got the bars created using the CSS as follows:

.chart {width:18%; background:#EEE; border:solid 1px #555;}
.bar {background:#AAF; float:left; color:#FFF;}

The dynamic bar is created thusly:

<span class="chart">
<span class="bar" style="width:X%></span>

where X is a computed percentage. This gives a proportional solid bar inside the containing "100%" box.

My issue is that I would like to also include the "X%" text smack dab in middle of the "chart" span, regardless of the length of the bar. So far I've only been able to get it centered in the middle of the bar (which makes 11% and 22% look the same length since the span expands to the length of the content (it's a short bar)), or in the middle of the remaining white space of the chart span.

I'll attempt an illustration of what I'm looking for:

======== 25%

Pretend the "25%" & "75%" are in the center and the final bar in the middle is all the way to the right

I've tried sticking the X% in its own <span>, but still couldn't get it to work. My attempts with positioning and z-index only succeeded in forcing the chart to expand to two lines, with the bar on one line and the X% on the other.

Thanks for your help.



WebmasterWorld Senior Member 10+ Year Member

Msg#: 541 posted 7:51 pm on Jan 17, 2003 (gmt 0)

You will need two spans inside the chart for each bar and use positioning to overlay the two, one being 100% wide with the text centered and the other being the coloured bar.

That should work.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 541 posted 8:12 pm on Jan 17, 2003 (gmt 0)


Thans for the quick reply.

I've tried that. I've attempted

<span class="chart">
<span class="pct">X%</span>
<span class="bar" style="width:X%"></span>

with the additional CSS for pct:

.pct {color:#888; width:100%;}

Adding "text-align:center" to the .chart class, centers the percentage, but the bar either starts after the percentage (without the "float:left"), or pops down to a second line (with the "float:left"). I've tried relative and absolute positioning for both with no luck.

An aside: am I correct in presuming that position:absolute positions relative to the containing block element, but not the containing inline element?

Floating and positioning is still a little bit of a mystery to me, so I'm sure I'm missing something.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 541 posted 11:11 pm on Jan 17, 2003 (gmt 0)

I don't mess with this much but here is the snippet on position:

Value: absolute ¦ relative ¦ static
Initial: static
Applies to: all elements
Inherited: no
Percentage values: N/A

Each variety of 'position' establishes one or more of the following:

A new rectangular overlay, outside of the document flow, into which the element's contents are flowed (absolute)
A box positioning context (absolute) or a Cartesian positioning context (relative) for absolutely positioned child elements
A new clipping region for child elements (absolute)
A position either within the current positioning context (absolute) or relative to the normally rendered position (relative)
A z-order relative to the current positioning context (absolute, relative)
'Absolute' Positioned elements act like block-level elements from a CSS1 formatting perspective. However, since they fall completely outside of the normal document flow, the following CSS1 properties do not apply: 'float', 'clear', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin'.

that's what you need to change to get them to overlap, but I'm not sure off hand what it needs to be, you may have to use different values for the top and left attributes as well...


10+ Year Member

Msg#: 541 posted 12:34 am on Jan 19, 2003 (gmt 0)

don't use span - use div thus:

<div class="chart">
<div class="bar" style="width:x%"></div>

with this added to your definitions:
chart { position:relative;}
bar { position:absolute; top:0px; left:0px; height:20px;}


WebmasterWorld Senior Member 10+ Year Member

Msg#: 541 posted 4:19 pm on Jan 20, 2003 (gmt 0)


Thanks for your reply. I can't use a div because I need an inline element--the chart's on the same line with the actual count and the text of the response.

However, I did add the "position:relative" to the chart class, and that has appeared to do what I want it to do! I had tried combinations of position:absolute and position:relative to the child spans (.bar and .pct) but not to the parent span (.chart).

I'm not sure why that makes a difference (and I welcome any explanation thereof) but I'm happy it works.

Thanks again to you and Gibble for your help.

For those keeping score at home, here is the final (subject to possible tweaking) CSS:

.chart {position:relative; width:18%; background:#EEE; border:solid 1px #555;}
.bar {position:absolute; left:0px; background:#AAF; color:#FFF;}
.pct {position:relative; width:100%; text-align:center; color:#F00;}

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved