Posted by Shane Becker on
<p>There's a rails plugin called <a href="http://nubyonrails.com/pages/css_graphs">css_graphs</a> written by <a href="http://topfunky.com/">Geoffrey Grosenbach</a> over at <a href="http://nubyonrails.com/">nuby on rails</a>. It's a rails helper wrapped around <a href="http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55">some work making graphs out of xhtml and css</a>. done by the folks at <a href="http://applestooranges.com/">Apples to Oranges</a>. It's pretty slick.</p>
<p>I played with it a while back when it first showed up. I even was thinking about doing a 'create your own charts and graphs entirely with xhtml/css' kind of site, but didn't. Though, I've still held onto the idea of using some of these in some places. The problem is, I've never liked the markup for the graph itself. Seemed all presentational, not very semantic.</p>
<p>So I cleaned it up. A bit. It's certainly not perfect. I would love any feedback on it, especially any ideas on how to get rid of the span and have the text from inside the <code><dd></code> actually be the first bit of text of the <code><dt></code>, whilst still being the value of <code><dd></code>. semantics, damn it!</p>
<p>Here's the nuts and bolts of it...</p>
<code>
<div style="text-align:left;color:#000000;background-color:#ffffff;border:solid black 1px;overflow:auto;font-family:monospace;padding:0.5em 1em;">
<span style="color:#881280;"><style></span><br>
.bar_chart {<br>
<span style="color:#88134f;">position</span>: <span style="color:#9b4400;">relative</span>;/* IE is dumb */<br>
<span style="color:#88134f;">width</span>: <span style="color:#9b4400;">100</span><span style="color:#0000ff;">%</span>;<br>
<span style="color:#88134f;">border</span>: <span style="color:#0000ff;">1px</span> <span style="color:#9b4400;">solid</span> <span style="color:#760f15;">#666</span>;<br>
<span style="color:#88134f;">padding</span>: <span style="color:#0000ff;">0</span>;<br>
<span style="color:#88134f;">background</span>: <span style="color:#760f15;">#F33</span>;<br>
<span style="color:#88134f;">clear</span>: <span style="color:#9b4400;">both</span>;<br>
} <br>
.bar_chart dt {<br>
<span style="color:#88134f;">display</span>: <span style="color:#9b4400;">block</span>;<br>
<span style="color:#88134f;">position</span>: <span style="color:#9b4400;">relative</span>;<br>
<span style="color:#88134f;">background</span>: <span style="color:#760f15;">#3F3</span>;<br>
<span style="color:#88134f;">height</span>: <span style="color:#0000ff;">2em</span>;<br>
<span style="color:#88134f;">line-height</span>: <span style="color:#0000ff;">2em</span>;<br>
<span style="color:#88134f;">border-right</span>: <span style="color:#0000ff;">1px</span> <span style="color:#9b4400;">solid</span> <span style="color:#760f15;">#666</span>;<br>
}<br>
.bar_chart dt span {<br>
<span style="color:#88134f;">padding-left</span>: <span style="color:#0000ff;">1em</span>;<br>
<span style="color:#88134f;">color</span>: <span style="color:#9b4400;">black</span>;<br>
/*<span style="color:#88134f;">display</span>: <span style="color:#9b4400;">none</span>;*/<br>
}<br>
dd {<br>
<span style="color:#88134f;">padding</span>: <span style="color:#0000ff;">1em</span>;<br>
<span style="color:#88134f;">margin</span>: <span style="color:#0000ff;">0</span>;<br>
<span style="color:#88134f;">float</span>: <span style="color:#9b4400;">left</span>;<br>
}<br>
<span style="color:#881280;"></style></span><br>
<br>
<span style="color:#881280;"><dl </span><span style="color:#994500;">class</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">"bar_chart"</span><span style="color:#881280;">></span><br>
<span style="color:#881280;"><dt </span><span style="color:#994500;">style</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">"width:24%"</span><span style="color:#881280;">><span></span>24%<span style="color:#881280;"></span></dt></span><br>
<span style="color:#881280;"><dd></span>24% of tests passed. 76% failed.<span style="color:#881280;"></dd></span><br>
<span style="color:#881280;"></dl></span><br>
</div>
</code>
<p>...and this is what it looks like.</p>
<code>
<pre>
.bar_chart {
position: relative;/* IE is dumb */
width: 100%;
border: 1px solid #666;
padding: 0;
background: #F33;
clear: both;
}
.bar_chart dt {
display: block;
position: relative;
background: #3F3;
height: 2em;
line-height: 2em;
border-right: 1px solid #666;
}
.bar_chart dt span {
padding-left: 1em;
text-align: left;
color: black;
/*display: none;*/
}
.bar_chart dd {
padding: 1em;
margin: 0;
float: left;
}
</pre>
</code>
<dl>
<dt><span>24%</span></dt>
<dd>24% of tests passed. 76% failed.</dd>
</dl>
<p style="clear:both;">When CSS is turned off, you get this:</p>
<dl>
<dt><span>24%</span></dt>
<dd>24% of tests passed. 76% failed.</dd>
</dl>
<p style="clear:both;">...which is not optimal. That's where I'd like some help if anyone has any suggestions.</p>
<p><strong>UPDATE:</strong> comments are off now, because this one post is getting slammed with spam.</p>