Histogramme en CSS et JavaScript

L'histogramme est un graphe en barre mais si la répartition se fait sur des années, donc avec des libellés de taille identique, il est possible de simplifier l'affichage, et il devient inutile de changer les couleurs des barres.

Cet article est la seconde partie de l'article Graphe en barre en CSS et JavaScript.

On peut en outre utiliser une texture pour enjoliver les barres, elle sera assignée dans le code CSS.

Pour le reste, l'insertion du graphe dans une page Web sera toujours aussi simple et rapide et c'est le but ici.

Le code HTML

Le code est simplifié par la suppression des valeurs de couleurs, on n'insère plus dans les balises que la valeur d'ordonnée et l'année.

La valeur de répartition est suivie du code ":", puis de l'année.

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

Les axes et les références en ordonnées sont toujours présentés par un conteneur externe au graphe:

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

<div id="labels">Années</div>

Il est suivi immédiatement du conteneur des années.
Les années seront alignées sur les barres correspondantes par une instruction JavaScript.

Le code CSS

Il est similaire au code du graphe en barres avec en option la définition d'une image de texture pour les barres, au niveau du code pour les balises <li>.

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

La fonction JavaScript

La fonction crée des barres et affiche les libellés. On ajoute cette instruction pour aligner les années sur les barres:

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

Le code complet.

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 = new String(i * 50 + 58) + "px";
        labels.innerHTML = labels.innerHTML + 
           "<span style='position:absolute;top:-16px;left:"+ 
           left+";background:"+ color+"'>" + year + "</span>";
    }	
}

window.onload=makeGraph;

Le démo ajoute aussi du code pour varier les couleurs si on le désire, mais les couleurs sont ignorées dans le cas où comme ici on a choisi d'afficher des barres avec une texture.

Démonstration de l'histogramme en CSS 2

Rien d'autre que le code inclut dans le source de cette page n'est nécessaire... Seule la liste des valeurs est propre à l'application.

Le code HTML nécessaire se réduit à ceci:

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

Le code CSS et JavaScript dans le source de cette page peuvent être placés dans un fichier externe à charger.

Télécharger l'image de texture.