Créer un graphique en barres avec CSS et PHP

Vous souhaitez publier régulièrement des données graphiques ? Vous avez besoin de communiquer sur votre site des chiffres fréquemment actualisés à l'aide d'un diagramme en barres ?

Rien de plus simple grâce à l'usage conjoint de CSS et PHP !

Un exemple

Créer une liste à l'aide de PHP

Nous avons besoin de créer une liste ordonnées basique, regroupant 3 types de données sur la tag <li> :

• l'attribut height : la hauteur des éléments de données formant une barre complète
• l'attribut left : l'axe des Y ou axe horizontal pour la barre complète
• l'attribut class (optionnel) : pour styler des groupes de données précis

Voilà ce que ça donne en HTML :

<ul class="barGraph">
	<li class="p1" style="height: 57px; left: 0px;">57</li>
	<li class="p2" style="height: 27px; left: 0px;">27</li>
	<li class="p3" style="height: 17px; left: 0px;">17</li>
	<li class="p1" style="height: 99px; left: 40px;">99</li>
	<li class="p2" style="height: 74px; left: 40px;">74</li>
	<li class="p3" style="height: 54px; left: 40px;">54</li>
...
</ul>

Vous n'aurez pas toujours une valeur height appropriée sous la main, dans ce cas il faudra échantillonner les données en fonction de l'effet désiré. Voilà le code qui permet de générer le code HTML via PHP :

function printGraph()
{
	$days = array();
	$xOffset = 0;
	$xIncrement = 40; // width of bars
	$graphHeight = 500; // target height of graph
	$maxResult = 1;
	$scale = 1;
	// Informations de connexion à la BDD
	// Connexion et sélection de la BDD
	// On récupère les données et l'on trouve les max values
	$result = mysql_query($query);
	if (!$result) die("no results available!");
	while($row = mysql_fetch_assoc($result)) {
		$days] = array( "P1" => $row
			, "P2" => $row
			, "P3" => $row);
		//On contrôle si cette colonne est la plus haute
		$total = $row;
		if($maxResult < $total) $maxResult = $total;
	}
	mysql_free_result($result);
	// On applique l'échelle
	$scale = $graphHeight / $maxResult;
	echo '<ul class="TGraph">';
	foreach($days as $date => $values){
		//On retrie l'array
		arsort($values);
		foreach($values as $priority => $num){
			// On applique une échelle pour s'adapter au graphique
			$height = ($num*$scale);
			// On imprime la barre
			echo "<li class='$priority' style='height: ".$height."px; left: ".$xOffset."px;' title='$date'>$num<br />$priority</li>";
		}
		// On passe à la colonne suivante
		$xOffset = $xOffset + $xIncrement;
	}
	echo '</ul>';
}

Habiller graphiquement le graphique à l'aide de CSS

Quand votre liste est "imprimée", il faut en barre une barre de graphique. Pour commencer, voici le minimum de styles applicables pour avoir quelque chose de fonctionnel :

.verticalBarGraph {
	border-bottom: 1px solid #FFF;
	height: 200px;
	margin: 0;
	padding: 0;
	position: relative;
	}
.verticalBarGraph li {
	border: 1px solid #555;
	border-bottom: none;
	bottom: 0;
	list-style:none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 39px;
	}

On affine le style

Cette option de présentation minimale est une modeste suggestion, voici de quoi aller plus loin dans le raffinement en utilisant toute la puissance de CSS (textures, images de fond pour les cellules des barres, bordures, etc.). Voici un exemple de ce type de présentationplus travaillée :

.barGraph {
	background: url(images/horizontal_grid_line_50_pixel.png) bottom left;
	border-bottom: 3px solid #333;
	font: 9px Helvetica, Geneva, sans-serif;
	height: 200px;
	margin: 1em 0;
	padding: 0;
	position: relative;
	}
.barGraph li {
	background: #666 url(images/bar_50_percent_highlight.png) repeat-y top right;
	border: 1px solid #555;
	border-bottom: none;
	bottom: 0;
	color: #FFF;
	margin: 0;
	padding: 0 0 0 0;
	position: absolute;
	list-style: none;
	text-align: center;
	width: 39px;
	}
.barGraph li.p1{ background-color:#666666 }
.barGraph li.p2{ background-color:#888888 }
.barGraph li.p3{ background-color:#AAAAAA }

A vous de jouer !

» Source : Terrill.ca