Pure Css Data Chart

Approach

In this example I am not using JavaScript or any backend application. All I rely on is well formed markup and css.
So, the goal is to present data chart. We could say that a chart is a two dimensional object. So, the best structural and semantical choice is definition list. Why? Well, for starter, it is a list of items. Although the list is linear, we could interpret definition titles (dt elements) as items on x axis and definition descriptions (dd elements) as values on y axis.
If that doesn't make sense because of my poor explanation skills :) what I'll do here is turn this:

unstyled definition list

into this

css data chart

with css alone.

The markup

In my example I have used a period of last 12 days and presented my working energy level in percentages, 100% being the best I've felt about working ever. As you can see, on 6th day it went up a bit because I received a solid paycheck and that boosted me up :)
Anyway, to structure this kind of data I chose definition list. Definition title contains the day title

Day 1

And definition description contains the value

36

Inside the definition description element I will add a span and nested em element. Not for structural purposes, but to give myself enough elements to work with. I will also assign classes that I can use later on.
So definition description looks like this now:

80

Styling it

Definition list contains acts as a chart container, so I'll assign background image to it and set the width and height to match the dimension of the chart. Also, I'll remove default margins and paddings

dl#csschart, dl#csschart dt, dl#csschart dd{
margin:0;
padding:0;
}
dl#csschart{
background:url(bg_chart.gif) no-repeat 0 0;
width:467px;
height:385px;
}

Definition titles have no visual purpose here, so I'll hide them:

dl#csschart dt{
display:none;
}

Moving on to the real thing. Definition descriptions contain 2 child elements: span and em. That gives me 3 elements to work with.
I will put

in the correct position by adding margins, setting their height so it matches 100% value and width that matches a column of the background chart. The
are floated left so they will line up. Each
has position relative so the child elements can relate to them.

dl#csschart dd{
position:relative;
float:left;
display:inline;
width:33px;
height:330px;
margin-top:22px;
}
dl#csschart dd.first{
margin-left:33px;
}

Span elements represent the column and em elements are those squares in the middle with values. Spans are positioned absolutely and placed at the bottom, so they could "grow" from bottom up based on their percentage.

dl#csschart span{
position:absolute;
display:block;
width:33px;
bottom:0;
left:0;
z-index:1;
color:#555;
text-decoration:none;
}
dl#csschart span em{
display:block;
font-style:normal;
float:left;
line-height:200%;
background:#fff;
color:#555;
border:1px solid #b1b1b1;
position:absolute;
top:50%;
left:3px;
text-align:center;
width:23px;
}

Here's the scheme of one chart bar

css data chart bar scheme

So, how do we set exact height?
We do that by setting the height in percentages for span element. You've noticed in the markup section above that span has two css classes. First one defines it's type (type1 - type4). In my case types are used to represent different color. The second class (p0 - p100) is the one that actually defines span's height.

dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
.
.
.c
dl#csschart span.p100{height:100%;}

So besides putting the value as a text, we have to provide a css class that matches

80

That will do the trick.
Of course, the markup could be generated programatically or by hand, whatever works best for you.