Un précédent article illustrait la création dynamique de graphes, sous forme d'images, avec la librairie GD. Nous allons présenter ici une autre méthode, moins puissante peut-être, mais plus simple: l'utilisation de tableaux HTML et de petites images qui, combinés à des scripts PHP, pourront former (dynamiquement, toujours) toutes sortes de graphes. Plus précisément, nous disposons d'une petite bibliothèque dédiée à cet effet, développée par Phil Davis: HTML Graphs.

L'outil permet de créer des histogrammes verticaux ou horizontaux, en encapsulant au maximum code HTML et code PHP. La fonction html_graph() admet comme arguments:

- deux séries de données: les noms ou désignations des valeurs, et les valeurs elles-mêmes;
- une série d'images pour chaque "bande" de l'histogramme (toutes les images pouvant bien sûr être les mêmes, l'intérêt d'en avoir plusieurs étant essentiellement pour varier les couleurs);
- une série d'indications sur le type du graphique.

On écrira par exemple:

html_graph($names; $values; $bars; $graph_vals);

$graph_vals est un tableau associatif qui contient un certain nombre de paramètres, notamment les suivants:

vlabel : titre vertical à appliquer au graphe;
hlabel : titre horizontal à appliquer au graphe;
type : type de graphique (0 = horizontal, 1 = vertical, 2 = double horizontal, 3 = double vertical);
cellspacing - espacement des cellules du tableau;
border - taille de la bordure du tableau;
width - taille du tableau;
scale - facteur d'échelle des valeurs;
vfcolor - couleur du titre vertical;
hfcolor - couleur du titre horizontal;
vbgcolor - couleur de fond du titre vertical;
hbgcolor - couleur de fond du titre horizontal;
namefcolor - couleur des noms ou désignations de valeurs;
valuefcolor - couleur des étiquettes de valeurs;
namebgcolor - couleur de fond des noms ou désignations de valeurs;
valuebgcolor - couleur de fond des étiquettes de valeurs;

Toutes les couleurs de fond s'appliquent aux cellules du tableau concernées.

Nous allons illustrer ceci en reprenant l'exemple déjà utilisé lors de la présentation de la librairie GD: une base de données créée et enrichie avec MySQL, et contenant les valeurs:

On rappelle que l'on se connecte en PHP par:

$connect = mysql_connect("localhost");
mysql_select_db("essai",$connect);

Puis on effectuera les requêtes suivantes:

$requete_sql = "SELECT MAX(valeur) FROM donnees";
$resultat_requete = $mysql_query($requete_sql,$connect);
$largest= mysql_result($resultat_requete,donnees.valeur);

$requete_sql = "SELECT mois,valeur FROM donnees WHERE annee='2001' ORDER BY id";
$resultat_requete = mysql_query($requete_sql,$connect);

La première requête permet d'obtenir la valeur maximale afin de dimensionner (calibrer) notre graphe. La seconde permet de récupérer les champs "mois" et "valeur" du tableau "donnees", pour l'année 2001.

Nous allons "préparer" ces données pour les mettre au format des arguments de html_graph():

$i=0;
while($colonne=mysql_fetch_array($resultat_requete))
{
  $names[$i] = $colonne[mois];
  $values[$i] = $colonne[valeur];
  $i++;
}

Puis nous allons désigner une série d'images (ici nous utilisons la même image pour chaque "bande"):

$bars = array();
for( $i=0;$i<SizeOf($values);$i++ )
{
  $bars[$i] = "images/hbar_blue.gif";
}

On précisera enfin les paramètres de notre graphe:

require("./html_graphs.php3"); // on a besoin des fonctions de la bibliothèque HTML Graphs

$graph_vals = html_graph_init();

$graph_vals["hlabel"] = "Résultats 2001";
$graph_vals["vlabel"] = "V<br>e<br>n<br>t<br>e<br>s<br>"; // affichage vertical grâce à l'incorporation de code HTML
$graph_vals["type"] = 1;
$graph_vals["vfcolor"] = "#FFFFFF";
$graph_vals["hfcolor"] = "#FFFFFF";
$graph_vals["vbgcolor"] = "#000000";
$graph_vals["hbgcolor"] = "#000000";
$graph_vals["width"] = 400;
$graph_vals["cellspacing"] = "1";
$graph_vals["scale"] = 250 / $largest;
$graph_vals["namefcolor"] = "#FFFFFF";
$graph_vals["namebgcolor"] = "#000000";

Et voilà! Le code complet peut être téléchargé au format texte. Le résultat obtenu est le suivant: