Afficher un compteur sous forme de jauge en HTML

Pour afficher de manière graphique un chiffre qui évolue entre une valeur minimale et une valeur maximale, la jauge est un outil très pratique. A l'image du thermomètre, elle est compréhensible du premier coup d'oeil et sa mise en oeuvre en HTML est d'une simplicité enfantine. Explications.

Deux images superposées

Pour réaliser une jauge, nous aurons besoin de deux images : la jauge vide et la jauge pleine. Voici les images que j'ai employées :

Jauge vide

Jauge pleine

L'astuce consiste à superposer deux blocs <div> ayant pour image de fond la jauge vide ou pleine, en faisant varier la hauteur du bloc contenant la jauge pleine en fonction de la valeur (et sa marge haute, pour qu'il soit toujours calé en bas et aligné sur le fond. Voici à quoi ressemble la jauge du dessus sans celle du dessous :

Jauge remplie à 1%
height: 4px; margin-top:44px;

Jauge remplie à 50%
height:24px; margin-top:24px;

Jauge remplie à 100%
height:44px; margin-top:4px

Jauge remplie à plus de 100%
height:48px; margin-top:0;

Il suffit de remplacer le fond gris par l'image de la jauge vide dans le bloc du dessous pour avoir un thermomètre visuellement correct.

Le code source

CSS


.jaugevide {
    height:48px;
    width:18px;
    background: transparent url(images/jaugevide.png) no-repeat bottom center;
}

.jaugepleine {
    height:48px;
    width:18px;
    background: transparent url(images/jaugepleine.png) no-repeat bottom;
}

HTML


<div class="jaugevide">
    <div class="jaugepleine" style="height:24px;margin-top:24px"></div>
</div>

Comment régler la hauteur

Evidemment, il sera nécessaire de régler la hauteur de la barre, le plus souvent par l'intermédiaire d'un langage type PHP.

Pour calculer la hauteur en PHP, vous aurez besoin de variables :

la valeur minimale $val_mini indiquée par la jauge (ex. 0). Si la variable réelle est au dessous, elle restera sur cette valeur
la valeur cible $val_cible de votre jauge, correspondant au but à atteindre (ex. 100°c, 250 euros, 10000 clics). Elle pourra être marquée par une graduation particulière sur l'image.
le nombre de pixels minimal $marge_bas de votre jauge (3 dans mon image, puisque l'image comporte quelques pixels de bordure)
le nombre de pixels de marge haute $marge_haut de votre jauge (3 dans mon image, puisque l'image comporte quelques pixels de bordure)
la hauteur en pixels $hauteur_jauge de votre jauge
la valeur actuelle de la variable $valeur.

On calculera donc la hauteur $hauteur_jauge avec la formule suivante :

$hauteur_jauge = round( ($valeur-$val_mini) / ($val_cible - $val_mini) * ($hauteur_jauge - $marge_bas - $marge_haut) + $marge_bas);

Exemple :


// Jauge de température
// Toutes les valeurs sont en pixels
$valeur = 15 ;
$val_cible = 40;
$val_mini = -10;
$hauteur_jauge = 48;
$marge_bas = 3;
$marge_haut = 3;

// Affiche 24, soit la hauteur en px du thermomètre

Il ne reste plus qu'à mettre à jour cette hauteur en intégrant le code HTML ci-dessus.

Raffinements

Plusieurs pistes peuvent-être explorées pour enrichir cette jauge basique :

l'animer via Javascript : un framework de type JQuery pourra faire varier dynamiquement la taille du div .jaugepleine
graduer la jauge de manière fine : avec une image de plus grande taille, cela doit être possible
changer la couleur une fois le but atteint : au delà de la valeur cible, on pourra changer l'image de fond (via une classe .atteint par ex.) pour afficher une jauge verte