posted on:February 2, 2008
Pure Css Data Chart
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.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe
Comments (28 Comments)
Sorry, the comment form is closed at this time.
Shani elharrar
February 3, 2008
Dennison Uy - Graphic Design
February 3, 2008
cssglobe
February 3, 2008
cssglobe
February 3, 2008
Karim
February 3, 2008
cssglobe
February 3, 2008
Sangesh
February 4, 2008
An Jay
February 4, 2008
Trainingstagebuch
February 4, 2008
hellbringer
February 4, 2008
cssglobe
February 4, 2008
David
February 4, 2008
pepa
February 6, 2008
Matthew
February 8, 2008
Demetrios Kyriakis
February 9, 2008
Dennison Uy - Graphic Design
February 9, 2008
cssglobe
February 10, 2008
cssglobe
February 10, 2008
cssglobe
February 10, 2008
Gregorio Espadas
March 4, 2008
Skim
April 9, 2008
Moksha
August 7, 2008
sk
February 12, 2009
lena
February 16, 2009
Tiago
March 17, 2009
Baronniggar
March 18, 2009
kinotakara
April 14, 2009
dnyaneshwar
June 27, 2009