(Not So)Pure CSS Data Chart

So, I was reading through the new tutorial over at cssglobe.com, Pure CSS Data Chart.  As with most tutorials, I considered how I could add my own twist to the example.  And the obvious thought came up, add javascript.  Now, I know that this will immediately take us from the “Pure CSS” part of it all, but that’s OK.  This is something new, and only loosely based on the concept from cssGlobe.

So there were two major things I wanted to improve with my Impure CSS data chart.  First, the markup seemed bloated to me.  The author did a great job executing his idea with pure CSS, but if we were to add javascript there was no need to have so much markup.  And secondly, all of those styles for the percentages bloated the CSS.  This just screamed for a javascript alternative.  So lets look at our new markup first:

<div>
	<dl class="csschart" id="csschart1">
		<dt>Day 1</dt>
		<dd class="bar1">36</dd>
		<dt>Day 2</dt>
		<dd class="bar2">45</dd>
		<dt>Day 3</dt>
		<dd class="bar3">51</dd>
		<dt>Day 4</dt>
		<dd class="bar4">48</dd>
		<dt>Day 5</dt>
		<dd class="bar1">55</dd>
		<dt>Day 6</dt>
		<dd class="bar2">80</dd>
		<dt>Day 7</dt>
		<dd class="bar3">72</dd>
		<dt>Day 8</dt>
		<dd class="bar4">71</dd>
		<dt>Day 9</dt>
		<dd class="bar1">64</dd>
		<dt>Day 10</dt>
		<dd class="bar2">55</dd>
		<dt>Day 11</dt>
		<dd class="bar3">62</dd>
		<dt>Day 12</dt>
		<dd class="bar1">44</dd>
	</dl>
</div>

If you have already seen the example from CSSGlobe, you will know that we took out quite a bit of markup. Mainly all the span’s and em’s.  We have also taken out all the “percentage” styles in the stylesheet.  But in addition to these changes I decided to change the way the bars work.  Instead of using a height, I am using background-position and padding to make our bars look correct.  This also means no more repeating background on the bars.  You could argue that this makes our total document size larger, and you would be right.  But to be honest, I would be doing this anyway.  You can only do so much with a repeating background.  So why not make our example use background images that would more reflect a complex design?  Lets look over the CSS:

div {
	background:url(bg_chart.gif) no-repeat 0 0;
	padding:22px 38px 38px 33px;
}
dl.csschart {
	width:396px;
	height:330px;
	overflow:hidden;
	position:relative;
}
dl.csschart dt{
	display:none;
}
dl.csschart dd {
	float:left;
	width:33px;
	height:100%;
	background-repeat:no-repeat;
	background-position:0 0;
	padding-top:8px;
	text-align:center;
}
dl.csschart dd.bar1 {
	background-image:url(newBar1.gif);
}
dl.csschart dd.bar2 {
	background-image:url(newBar2.gif);
}
dl.csschart dd.bar3 {
	background-image:url(newBar3.gif);
}
dl.csschart dd.bar4 {
	background-image:url(newBar4.gif);
}

So that is all the changes we made to the original code.  Now to the javascript.  I’m only going to explain what the javascript does, and leave it to you to play around with it and make it your own.  In a nutshell, we take the number in each “bar” and use it to calculate our new background position(which changes the “size” of the bar) and a new top padding (moves the number down so it stays in the box).  Since we have a wrapping div around our whole dl, we can hide all overflow and not worry about the bars shooting our of the bottom.

So that’s it.  Have fun with this example, and make your own. That is the point of tutorials after all.  Enjoy!

You can view full example here.