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:
into this
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
And definition description contains the value
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:
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
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
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
That will do the trick.
Of course, the markup could be generated programatically or by hand, whatever works best for you.