Bar Chart in CSS and JavaScript

Illustrating a Web page with a bar graph, quickly and without using a framework that would slow the page load, you will be surprised to see that this can be achieved with a few lines of CSS and a single JavaScript function!

All it needed was 3 minutes 15 seconds, to copy paste the code from the demonstration and adding data to create the graph below:

The HTML code

Explaining the code of the demonstration.

Basically, the code is just a list:

<ul>  
  <li>30:2007:lightblue</li>
  <li>40:2008:lightgreen</li>
  <li>80:2009:yellow</li>
  <li>14:2010:cyan</li>
</ul>

The only thing that the webmaster has to add, is the data. In each list item, separated by the code ":", place the label for the bar, the amount or the percentage, and a color for the bar.
The JavaScript function is responsible for producing the graph.

To add axis and references, a container is added:

<div id="graph">
  200<br /> <br /> <br /> 150 <br /> <br /> <br /> 100 <br /> <br /> <br /> 50
<ul>
    <li></li>
     .....
</ul>
</div>

The choice of values depends on the application. For the market share of browsers, for example, a single number is sufficient.

Another container is added for labels:

<div id="labels">Years : </div>

Displaying automatically labels on the graph would be complicated. To have them displayed on the graph itself, you can capture the graph once generated and add text on the image with Paint.NET or The Gimp. (see software).

The CSS code

It turns <ul> container and <li> items into a bar graph.

It is especially important that the container has the absolute position inside the container that displays the landmarks and items an absolute position. The JavaScript function is responsible for positioning the bars inside the container.

#graph
{
    position:relative;
    width:660px;
    height:216px;
    margin:8px;
    padding:0;	
}

#graph ul
{
    position:absolute;
    top:0;
    left:32px;
    width:600px;
    height:200px;
    border-left:1px solid black;
    border-bottom:1px solid black;	
}

Axis are created by a border of one pixel thick.

Bars are defined as:

#graph li
{
   position:absolute;	
   list-style:none;
   background:lightblue;
   width:40px;
   text-align:center;
   border:1px solid black;
   visibility: hidden;
}

The black border added to bars is an option.
A blue background color is given by default, it is modified by the JavaScript function.

Visibility delayed

To prevent the display of content of items before transformation in graphics by JavaScript, <li> tags are hidden at start:

visibility: hidden;

and then made visible:

item.style.visibility="visible";	

The JavaScript function

The role of this function is to create bars and display labels.

function makeGraph(container, labels)
{
    container = document.getElementById(container);
    labels = document.getElementById(labels)
    var dnl = container.getElementsByTagName("li");
    for(var i = 0; i < dnl.length; i++)
    {
        var item = dnl.item(i);
        var value = item.innerHTML;
        var color = item.style.background=color;
        var content = value.split(":");
        value = content[0];
        item.style.height=value + "px";
        item.style.top=(199 - value) + "px";
        item.style.left = (i * 50 + 20) + "px";
        item.style.height = value + "px";
        item.innerHTML = value;
        item.style.visibility="visible";	
        color = content[2];
        if(color != false) item.style.background=color;
        labels.innerHTML = labels.innerHTML +
             "<span style='margin:8px;background:"+ color+"'>" + 
             content[1] + "</span>";
    }	
}

window.onload=function () { makeGraph("graph", "labels") }

We extract the DOM object of the container to modify locally <ul> <li> and not all these tags in the page.

For each tag <li> object graph:

• The inner test is extracted.
• Data are separated: label, value, color.
• The value is the height of the bar. This height is subtracted from the height of the graph, it becomes the height of the <li> item whose background color is changed.
• The labels are placed in a second container with background color similar to that of the bar.

This is sufficient to complete a bar chart to a page without adding a framework in a few minutes!

Demonstration

More

• Histogram in CSS and JavaScript.
  A simpler version.