Histogram in CSS and JavaScript

The histogram is a bar chart, but if the distribution is done over years, and so labels have the same size, it is possible to simplify the display, and it becomes unnecessary to change the color of bars.

This article is the second part of the article Bar Graph in CSS and JavaScript.

You can also use a texture for embellishing the bar, it will be assigned in the CSS code.

Again, inserting the chart into a web page remains still simple and quick, and it's the goal here.

The HTML code

The code is simplified by the removal of color values, we now only inserts into <li> tags the values and years.

A value distribution is followed by the code ":" and then the year.

<ul>  
  <li>30:2007</li>
  <li>40:2008</li>
  <li>80:2009</li>
  <li>14:2010</li>
</ul>

The axis and years are still displayed into a container external to the graph::

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

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

It is immediately followed by the container for years.
Years will be aligned with the bars corresponding by a JavaScript statement.

The CSS code

It is similar to the code of the bar graph with optional definition of an texture to the bars in the CSS descriptor for <li> tags.

#graph li
{
   position:absolute;	
   list-style:none;
   background:lightblue;
   width:40px;
   text-align:center;
   border:1px solid black;
   visibility: hidden;
   background-image:url(bar-shaded.png);
   background-repeat:repeat-y;
}

The JavaScript function

The function creates the bars and displays the labels. This statement is added to align the years on the bars:

left = (i * 50 + 58) + "px";

The full code:

function makeGraph()
{
    var container = document.getElementById("graph");
    var 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 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";	
        left = (i * 50 + 58) + "px";
        labels.innerHTML = labels.innerHTML + 
           "<span style='position:absolute;top:-16px;left:"+ 
           left+";background:"+ color+"'>" + year + "</span>";
    }	
}

window.onload=makeGraph;

The demo also has code to change the colors if desired, but the colors are ignored when, as here, we have chosen to display the bars with a texture.

Demonstration of histogram in CSS 2

Nothing else than the code included in the source of this page is required... Only the list of values is specific to the application.

The HTML code required is just that:

<ul>
<li>30:2006</li>
<li>80</li>
<li>120</li>
<li>20</li>
<li>28</li>
</ul>

the CSS and JavaScript in the source of this page may be stored into an external file to include.

Download the texture image.