TUTORIELS 
Des graphes en Php avec JpGraph
JpGraph est une librairie GPL de classes capable de générer très rapidement des graphiques très complets. La version 1.4 de cet outil orienté objet vient de paraître: petit panorama de ce dont il est capable.  (21 novembre 2001)
 

Attention: ce tutoriel a été écrit pour la version 1.4 de JpGraph, que vous pouvez

Vous vous en souvenez peut-être, nous avons déjà traité par le passé deux moyens pour générer des graphiques en Php. Il s'agissait de la bibliothèque HTML Graph et de la librairie GD.

JpGraph (aucun lien avec la solution de caching "jpcache") est développé par Johan Persson. Son outil est puissant, sans être complexe pour l'utilisateur. En effet, son paramétrage est aisé grâce à son approche orienté objet : quelques lignes de code suffisent réellement pour générer un graphique tel que celui-ci, nous allons voir comment :

(Exemple basé sur un précédent sondage de JDNet Développeurs)

Démarrage

Si vous souhaitez installer cette puissante librairie chez votre hébergeur, quelques pré-requis sont néanmoins nécessaires :

- Php 4.02 au moins doit être installé.
- La librairie GD 1.x doit être supportée (la GD 2.x peut poser des problèmes).

Pour vérifier votre configuration facilement :

<?
     phpinfo();
?>

Un simple "Phpinfo" suffit pour obtenir les détails de l'installation de la version Php chez votre hébergeur.
Mauvaise nouvelle, votre version n'est pas compatible ? Consolez-vous avec EasyPHP et installez en quelques clics, sous windows, Apache, Php 4 et PhpMyAdmin par la même occasion.

Nous sommes désormais prêts à réaliser notre premier graphique, nous souhaitons obtenir un graphique classique (ordonnée / abscisse), avec des légendes pour chaque axe et un titre.

Pour le concevoir, nous allons profiter de l'approche objet de JpGraph (les classes sont précisemment décrites dans la documentation). Celle-ci n'est pas une difficultée pour l'utilisateur de base, bien au contraire. Ce système permet d'implémenter rapidement ce que l'on souhaite en peu de lignes, la preuve avec les premières lignes de code qui donneront vie à notre graphique :

<?php
include ("votre_path/jpgraph14/jpgraph.php");
include ("votre_path/jpgraph14/jpgraph_line.php");

$ydata = array(8,3,16,2,7,25,16);

// Creation du graphique
$graph = new Graph(300,200);
$graph->SetScale("textlin");

// Création du système de points
$lineplot=new LinePlot($ydata);

// On rajoute les points au graphique
$graph->Add($lineplot);

// Affichage
$graph->Stroke();
?>

Cela nous donne 8 lignes de code, "include" compris, hors commentaires, pour afficher ceci :

Vous l'avez remarqué, nous n'avons pas eu besoin de gérer l'échelle, le graphique s'adapte automatiquement à nos données. De même pour le format de sortie : gif, png, ou jpg, JpGraph est capable de choisir quel format est le mieux adapté au graphique généré. Ses choix sont parfois restreints par ceux supportés par votre plate-forme Php.

Nous souhaitions avoir un titre et une légende, rajoutons-les maintenant :

<?php
   // On élargit les marges pour pouvoir placer les légendes (gauche, droite, haut, bas)
     $graph->img->SetMargin(40,20,20,40);
     $graph->title->Set(“Données de test pour JDN Dév.”);
     $graph->xaxis->title->Set(“CA 2000 ”);
     $graph->yaxis->title->Set(“Paramètre fictif... ”);
?>

Nous obtenons :

Vous découvrirez de même d'autres façons pour agrémenter ce type de graphique dans la documentation. Un tutoriel, en anglais, explique notamment pas à pas comment créer des graphiques de type "barres".

Le petit "plus" l'anti-aliasing :

Pour illustrer cette option, élaborons deux petits graphiques basé sur le même code :

<?php
include ("VOTRE_PATH/jpgraph14/jpgraph.php");
include ("VOTRE_PATH/jpgraph14/jpgraph_spider.php");

$data = array(55,80,46,71,95);
$graph = new SpiderGraph(180,180,"auto");
$plot = new SpiderPlot($data);

// $graph->img->SetAntiAliasing();

$graph->Add($plot);
$graph->Stroke();
?>

Le listing présenté est celui du graphique de gauche. Pour celui de droite nous avons décommenté la ligne :

$graph->img->SetAntiAliasing();

... Activant ainsi l'anti aliasing :

  

Voilà pour cet aperçu de cette librairie graphique.
Sachez également que JpGraph possède aussi un système de cache afin d'optimiser le temps de chargement de vos pages, et bien d'autres possibilités dans le domaine de création de graphique. Pour chaque graphique vous obtenez le source correspondant, ce qui aide grandement à la compréhension du code. Testez chez vous les différents paramètres possibles. Pour chaque script il suffit de remplacer le chemin des fichiers "include" entré par défaut par JpGraph avec les vôtres et le tour est joué.

 
[ Arnaud GadalJDNet
 
Accueil | Haut de page