Dcouverte de la librairie Php JpGraph


prcdentsommairesuivant

III. Autres types de graphiques

JpGraph permet la cration d'autres types de graphiques, par exemple des images pour la validation anti-spam, des images de type L.E.D. (diodes lectroluminescences), des diagrammes de Gantt) ainsi que la reprsentation de fonctions mathmatiques.

III-A. Anti-spam

Pour lutter contre le spam, de nombreux sites sites demandent aujourd'hui l'utilisateur de valider visuellement son inscription.

Cette validation est base sur la reproduction d'une chane de caractres affiche sous la forme d'une image, dont les caractres ne sont pas suffisamment lisibles pour un robot.

La mise en oeuvre de ce type de graphique est particulirement simple.

Le code :

 
Sélectionnez
<?php
// Inclure la librairie
require_once("../jpgraph/jpgraph_antispam.php");

// Cration d'un objet AntiSpam
$spam = new AntiSpam();

// Crer une chane de 10 caractres
$chars = $spam->Rand(10);

// Note : les 'o' (lettre) et '0' (zro) sont interdits
// ...pour viter toute confusion
$spam->Set($chars);

// Affichage russi ?
if( $spam->Stroke() === false ) {
    die('Illegal or no data to plot');
}
?>

Voici l'image produite :

Image anti-spam
Image anti-spam

III-B. L.E.D.

Les L.E.D. sont des diodes lectroluminescentes.

On retrouve notamment ce type d'image pour reprsenter un compteur de visites.

Tout comme le graphique anti-spam, la cration d'un graphique L.E.D. s'avre particulirement simple.

En voici un exemple :

 
Sélectionnez
<?php
// Inclure les librairies
include "../jpgraph/jpgraph.php";
include "../jpgraph/jpgraph_led.php";

// Construction de l'objet LED ********
// L'argument spcifie la taille 
// du rayon de chaque point (3 pixels par dfaut)
$led = new DigitalLED74(5);

// Nombre de visites sur mon site ;=)
$nb_visites = "189098";

// Affichage avec spcification de la couleur
$led->Stroke($nb_visites, LEDC_GREEN);

?>

Voici l'image produite :

Graphique L.E.D.
Graphique L.E.D.

Une fois encore, la source parle d'elle mme.

Pour la petite histoire, si le constructeur de l'objet LED se prsente sous cette forme :

 
Sélectionnez
$led = new DigitalLED74(5);

Le 74 signifie alors que chaque caractre est reprsent par un ensemble de point 7 en vertical par 4 en horizontal.

A noter, les diffrentes constantes de couleurs :

Constante Couleur
LEDC_RED Image non disponible
LEDC_GREEN Image non disponible
LEDC_BLUE Image non disponible
LEDC_YELLOW Image non disponible
LEDC_GRAY Image non disponible

III-C. Diagramme de Gantt

JpGraph permet la cration de diagramme de Gantt.

Le fichier d'exemples de la librairie (examples/testsuit.php) offre bon nombre d'exemples de diffrents diagrammes de Gantt.

Nous allons voir un exemple simple d'utilisation, en nous appuyant sur la base de nos ventes. Voyons en particulier comment placer sur un diagramme les ventes des mois de novembre et de dcembre 2006.

Concernant la production de donnes, l encore nous ne rencontrons pas de problme particulier, puisqu'il s'agit de filtrer sur l'anne et de slectionner deux mois.

Exemple pris sur l'exemple ganttex09.php du fichier testsuit.php

La ralisation du graphique est assez spcifique, comme nous allons le voir.

Le code :

 
Sélectionnez
<?php
include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_gantt.php");

define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DATABASE', 'tuto_jp_graph');


$ventes2006 = array();

// **********************
// Extraction des donnes
// **********************

$sql = <<<EOF
SELECT `DTHR_VENTE` 
FROM VENTES
WHERE 
	YEAR( `DTHR_VENTE` ) = 2006
	AND 
	(
		MONTH( `DTHR_VENTE` ) = 11 OR 
		MONTH( `DTHR_VENTE` ) = 12
	)
EOF;

$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connexion mysql');

@mysql_select_db(MYSQL_DATABASE) or die('Pb de slection de la base');

$mysqlQuery = @mysql_query($sql, $mysqlCnx) or die('Pb de requte');

while ($row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	$ventes2006[] = array(1, ACTYPE_MILESTONE, 'Ventes', $row['DTHR_VENTE'], ''); 
}

// ************************
// Production du graphique
// ************************ 

// Cration du graphique
$graph = new GanttGraph();

// Titre
$graph->title->Set("Visualisation des ventes sur une timeline \npour les mois novembre et dcembre 2006");

// Paramtrage de l'apparence finale
$graph->ShowHeaders(GANTT_HYEAR | GANTT_HMONTH | GANTT_HDAY | GANTT_HWEEK);
$graph->scale->week->SetStyle(WEEKSTYLE_FIRSTDAY);

// Ajouter les diffrents points ou priodes
$graph->CreateSimple($ventes2006);

// Afficher
$graph->Stroke();

?>

Voici l'image produite :

Diagramme de Gantt
Diagramme de Gantt

Une fois de plus on peut constater que la librairie produit beaucoup d'lments en comparaison de l'importance du code source.

Quelques spcificits lies au type de graphique Gantt :

La cration d'un diagramme de Gantt ncessite la cration d'un tableau index contenant n tableaux indexs qui reprsentent un vnement sur la ligne du temps (timeline).

Chaque vnement peut tre soit un point (localis sur la date donne), soit tre une priode (localise sur la date de dbut et la date de fin).

Le tableau reprsentant un vnement est structur de la faon suivante :

Argument Signification
1 Index de la ligne du diagramme
2 Type d'vnement (constante)
3 Lgende de la ligne ( gauche de la timeline)
4 La date et l'heure de l'vnement
5 La lgende de l'vnement

Revoyons le code correspondant la cration des lments de notre diagramme :

 
Sélectionnez
while ($row = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	$ventes2006[] = array(1, ACTYPE_MILESTONE, 'Ventes', $row['DTHR_VENTE'], ''); 
}

La cration du graphique :

 
Sélectionnez
$graph = new GanttGraph();

Le paramtrage de l'affichage :

 
Sélectionnez
$graph->ShowHeaders(GANTT_HYEAR | GANTT_HMONTH | GANTT_HDAY | GANTT_HWEEK);
$graph->scale->week->SetStyle(WEEKSTYLE_FIRSTDAY);

A l'aide de la mthode ShowHeaders(), on indique les colonnes que l'on souhaite faire apparatre dans l'en-tte du diagramme.

Constantes admises par la mthode ShowHeader() :

CONSTANTE CORRESPONDANCE
GANTT_HYEAR ANNEES
GANTT_HMONTH MOIS
GANTT_HDAY JOURS
GANTT_HWEEK SEMAINES
GANTT_HHOUR JOURS
GANTT_HMIN MINUTES

Enfin l'affichage s'effectue avec la mthode CreateSimple() :

 
Sélectionnez
$graph->CreateSimple($ventes2006);

III-D. Fonctions mathmatiques

Autre possibilit avec cette librairie : la cration de reprsentation graphique d'une fonction mathmatique.

Une nouvelle fois, les efforts fournis par l'auteur de la librairie afin de faciliter la reprsentation graphique de fonctions s'avrent payants puisque l encore, la quantit de code produire est drisoire.

N'tant pas un spcialiste de l'algbre (loin de l...) je prendrai pour l'exemple un cas simple : la reprsentation graphique de la fonction mathmatique x au carr.

Pour crer notre graphique, il faudra inclure les librairies suivantes :
  1. jpgraph.php
  2. jpgraph_line.php
  3. jpgraph_utils.inc.php
La cration de ce type de graphique est simple :
  • Cration de la fonction l'aide d'une mthode ddie
  • Ensuite, gnration des diffrents points qui constitueront notre courbe.
  • Enfin, comme pour un graphique courbe, paramtrage et affichage de la reprsentation graphique.

Voici le code :

 
Sélectionnez
<?php
include ("../jpgraph/jpgraph.php");
include ("../jpgraph/jpgraph_line.php");
include ("../jpgraph/jpgraph_utils.inc.php");

// Gnrer une fonction
$f = new FuncGenerator('$x*$x');

// Crer une srie de points
list($xdata,$ydata) = $f->E(-9,9);

// Nouveau conteneur
$graph = new Graph(450,350,"auto");
$graph->SetScale("linlin");

// Titre
$graph->title->Set('Exemple de fonction : "x au carr"');

// Placer l'axe Y au centre
$graph->yaxis->SetPos(0);

// Cacher premire et dernire lgende
$graph->yaxis->HideFirstLastLabel();

// Crer une courbe 
$courbe = new LinePlot($ydata,$xdata);
$courbe->SetColor('blue');

// Ajouter la courbe au graphique
$graph->Add($courbe);
$graph->Stroke();

?>

Rsultat :

Fonction x au carr
Fonction x au carr

Revenons sur les quelques instructions spcifiques ce type de graphique :

D'abord cration de la fonction mathmatique x au carr頻 :

 
Sélectionnez
$f = new FuncGenerator('$x*$x');

ensuite vient la cration de la liste de points correspondant en passant un point de rfrence. Ici on utilise un point de coordonnes -9 pour les abscisses et 9 pour les ordonnes. Cette liste de points est compose d'un tableau index d'une cinquantaine de valeurs pour chaque axe.
La mthode retourne donc deux tableaux :

 
Sélectionnez
list($xdata,$ydata) = $f->E(-9,9);

Le reste ne pose pas de problme particulier, ces notions ayant t abordes auparavant.

Comme nous avons pu le voir dans ce chapitre ddi aux autres types de graphiques, JpGraph offre bon nombre de possibilits, y compris dans des domaines inattendus.


prcdentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2007 eric190. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.