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.
Shani elharrar 3 Feb, 2008
Thanks for sharing.
Dennison Uy - Graphic Design 3 Feb, 2008
cssglobe 3 Feb, 2008
The purpose of this article wasn't to replace google's api. It is here to demonstrate another way of creative css usage. I wrote it step by step so folks can see where I am going at, understand the technique and use it later for charts or something similar. Hopefully I made it clear, sometimes I fail, but what I want to do is share some of the ideas I have and help people learn css. Is API here to educate or even help in understanding how things work? I don't think so.
cssglobe 3 Feb, 2008
Karim 3 Feb, 2008
Second, wouldn't it be more interesting if you style the "dd" element directly? without adding a "span"? Something like: [dd class="type2 p80"][em]8[/em][/dd] ?
cssglobe 3 Feb, 2008
As for dd, I use dd or one reason, it acts as a 100% container. That way I can be really precise. If you put percentages on dd, height would relate to dl element. As you can see dl element is wider and taller than 100% bar should be.
Sangesh 4 Feb, 2008
I just love this article. Thanks for sharing.
An Jay 4 Feb, 2008
Trainingstagebuch 4 Feb, 2008
Greetings
Nils
hellbringer 4 Feb, 2008
cssglobe 4 Feb, 2008
David 4 Feb, 2008
Personally I'd use the inline height definitions. Inline styling is generally deprecated, but in this case the height relates directly the meaning of the element, so to me it makes sense to define it inline.
pepa 6 Feb, 2008
When inline styling is deprecated, then use height attribute of image.
Matthew 8 Feb, 2008
http://www.mausonio.com/?p=50
Thanks again for the inspiring article.
Demetrios Kyriakis 9 Feb, 2008
The background containing the axis is totally hardcoded, so basicaly:
- it can render on the y axis only percentages, and this only till 100%
- it can render on y only values till 12 and with the hardcoded label "days".
So this is more "image" based than "pure CSS" :(.
The look is however very nice: would you please make upgrade that is a little more general? i.e. not hardcoded axis?
Thank you,
Demetrios.
Dennison Uy - Graphic Design 9 Feb, 2008
cssglobe 10 Feb, 2008
cssglobe 10 Feb, 2008
Background chart image is a part of the visualization process, just like the background images for bars are.
cssglobe 10 Feb, 2008
If some readers fail to see the value of it, and hopefully learn something, I am very sorry.
You may use the weapons of choice for every thing you do but don't throw away new ideas :)
Gregorio Espadas 4 Mar, 2008
Skim 9 Apr, 2008
Thanks for sharing this one.
Moksha 7 Aug, 2008
sk 12 Feb, 2009
lena 16 Feb, 2009
For this tutorial 1 background image and 4 color images for the chart are needed...
this will be better if instead of 4 images only web color were used.
Tiago 17 Mar, 2009
Baronniggar 18 Mar, 2009
I will use it on my project with some php function :)
Thanks a lot Mister!
kinotakara 14 Apr, 2009
dnyaneshwar 27 Jun, 2009
one requist sir please send your site .
thank you sir.