Css数据图表

Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let's say simple data chart? How about giving it a try with nothing but good ol' css?

Take a look at the Demo | Download Css 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:

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

<dt>Day 1</dt>

And definition description contains the value

<dd>36</dd>

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:

<dd><span class="type2 p80"><em>80</em></span></dd> 

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 <dd> 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 <dd> are floated left so they will line up. Each <dd> 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

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%;}

.

.

.

dl#csschart span.p100{height:100%;}

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

<dd><span class="type2 p80"><em>80</em></span></dd>

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