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é.
|