CSS data visualization

Data visualization of graphs, diagrams is mainly solved using flash and some programming languages. Are these ways the only ones? Let's try to accomplish this task with CSS.

Foreword
In this example, I will not use either javascript or any other languages. All I need is good markup and CSS code.
Thus, our goal is to present the data in a table in the form of a diagram. It can be noted that these diagrams are an object of 2 elements that are directly dependent on each other. Therefore, the best solution in terms of structure and semantics is the use of definition lists.
Why? Well, for starters, this is a list of items. Although the list is linear, we can designate definition headings (dt elements) as points along the X axis and description of definitions (dd elements) as values ​​along the Y axis.

And we will do the following:
imagine

in this form

only with CSS code

Implementation
For example, I used the period of the last 12 days and my presentation of the performance of the day (something like the efficiency of the working day) as a percentage. As you noticed, on the 6th day the percentage was the highest, because I received a salary, which motivated me :-)
')
The headings of the definitions in this case will be the days themselves in order from 1 to 12

Day 1

A description of the definitions will be the values ​​of my efficiency in%

36

Inside the dd element, I will also add the span and em elements. Not in order to change the structure, but in order to have enough elements to work with styles. I will also assign a class to an element that we will issue later.
Thus, the description of the definition will look like this:

80

Now you can do directly CSS
The content of the definition lists is an element of the diagram (column), so I will assign it a background image, determine the width and height of the column as far as the block of the diagram allows. Also, you need to reset all default indents.

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 headings do not have the purpose of visual display, so we hide them:

dl#csschart dt{
display:none;
}


We are already close to the denouement. Recall that the definition description element contains 2 child elements: span and em. This gives us 3 elements at once to work on.
Set for the corresponding indents, then the height and width, within which our background image will repeat. Set the binding on the left so that the elements are lined up.

dl#csschart dd{
position:relative;
float:left;
display:inline;
width:33px;
height:330px;
margin-top:22px;
}
dl#csschart dd.first{
margin-left:33px;
}

The span element is the content of the column, and the em element will be that square in the middle of the column containing its value. For span, we set the absolute positioning property and make it snapped to the bottom so that the column “grows” up.

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

Schematically, this can be represented as:


So, how do we find out the exact values ​​of the height of the elements?
We do this with the help of the span element, indicating the height in%. As you noticed in the code above, the span element has 2 classes. The first of them determines its type (type1 - type4). In my case this is done in order to define different colors. The second class (p0 - p100) will be responsible for the height of the column.

dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
.
.
.
dl#csschart span.p100{height:100%;}

Before inserting values, we must assign all the necessary classes for the span element as follows:

80

Well, that's the whole trick.
Of course, the markup can be programmed, and not manually entered - it all depends on the task.
View all this in real time here or download the archive .