Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

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?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• Shani elharrar on 3 Feb, 2008 wrote:

  Great article!
  Thanks for sharing.

• Dennison Uy - Graphic Design on 3 Feb, 2008 wrote:

  For quick and easy charting I would rather use the Google Chart API: http://code.google.com/apis/chart/

• cssglobe on 3 Feb, 2008 wrote:

  Oh, would you?
  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 on 3 Feb, 2008 wrote:

  Due to some server maintenance, some comments for this post have been deleted. My apologies to comment authors... I kindly ask you to write the comments again, thanks.

• Karim on 3 Feb, 2008 wrote:

  Wait, wait... you really mean: 100 classes? one for every percent? :)
  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 on 3 Feb, 2008 wrote:

  @Karim: Yup, 100 classes :) unless you want inline styling generated via scripts.
  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 on 4 Feb, 2008 wrote:

  Awesome... CSS rocks man...
  I just love this article. Thanks for sharing.

• An Jay on 4 Feb, 2008 wrote:

  wow...Great artcile. This is great.

• Trainingstagebuch on 4 Feb, 2008 wrote:

  Thank you for these great article.
  
  Greetings
  Nils

• hellbringer on 4 Feb, 2008 wrote:

  You can use style="height:1%" etc. without any script and 100 unnecessary classes.

• cssglobe on 4 Feb, 2008 wrote:

  Inline styling is something you should avoid....

• David on 4 Feb, 2008 wrote:

  Nice. Reminds me of http://meyerweb.com/eric/css/edge/bargraph/demo.html
  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 on 6 Feb, 2008 wrote:

  I use similar bar graphs many years on intranet for production data. You can see samples on http://swatelier.info/at/articles/graphPlan.htm
  
  When inline styling is deprecated, then use height attribute of image.
  

• Matthew on 8 Feb, 2008 wrote:

  Hey author. I took your example and made a not so "pure" version using javascript. Come check it out and let me know what you think.
  http://www.mausonio.com/?p=50
  Thanks again for the inspiring article.

• Demetrios Kyriakis on 9 Feb, 2008 wrote:

  The chart looks very nice, but looking at the implementation it has an extremly major problem: it is *hardcoded* in the image:(.
  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 on 9 Feb, 2008 wrote:

  @CSSGlobe yes, I definitely would use Google Chart for data visualization, which you indicated at the beginning of the article. If the goal was to display the capabilities of CSS then you should have said so in the first place.

• cssglobe on 10 Feb, 2008 wrote:

  It's pretty obvious that this is a css demonstration...

• cssglobe on 10 Feb, 2008 wrote:

  @Demetrios: Actually, I used css to visualize data I already have in the source. If you look at the non css version of the markup you'll notice that everything is pretty straightforward. There are titles saying "Day 1" etc. and there are values. So, everything is clear (and accessible).
  Background chart image is a part of the visualization process, just like the background images for bars are.

• cssglobe on 10 Feb, 2008 wrote:

  So, this article is about taking data formed in a linear, list-type of way and, using the power of css, turning it into something more visual. You may say call it "creative use of css".
  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 on 4 Mar, 2008 wrote:

  Excellent!! I've been looking for somethings like this!!! Not JS, not Ajax, just CSS... Amazing!!! Congrats!!!

• Skim on 9 Apr, 2008 wrote:

  Very nice tutorial!
  Thanks for sharing this one.