Découverte de la librairie Php JpGraph


précédentsommairesuivant

III. Autres types de graphiques

JpGraph permet la création 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 représentation de fonctions mathématiques.

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 basée sur la reproduction d'une chaîne de caractères affichée sous la forme d'une image, dont les caractères ne sont pas suffisamment lisibles pour un robot.

La mise en oeuvre de ce type de graphique est particulièrement simple.

Le code :

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

// Création d'un objet AntiSpam
$spam = new AntiSpam();

// Créer une chaîne de 10 caractères
$chars = $spam->Rand(10);

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

// Affichage réussi ?
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 représenter un compteur de visites.

Tout comme le graphique anti-spam, la création d'un graphique L.E.D. s'avère particulièrement 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 spécifie la taille 
// du rayon de chaque point (3 pixels par défaut)
$led = new DigitalLED74(5);

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

// Affichage avec spécification 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 même.

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

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

Le 74 signifie alors que chaque caractère est représenté par un ensemble de point 7 en vertical par 4 en horizontal.

A noter, les différentes 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 création de diagramme de Gantt.

Le fichier d'exemples de la librairie (examples/testsuit.php) offre bon nombre d'exemples de différents 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 décembre 2006.

Concernant la production de données, là encore nous ne rencontrons pas de problème particulier, puisqu'il s'agit de filtrer sur l'année et de sélectionner deux mois.

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

La réalisation du graphique est assez spécifique, 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 données
// **********************

$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 sélection de la base');

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

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

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

// Création du graphique
$graph = new GanttGraph();

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

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

// Ajouter les différents points ou périodes
$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'éléments en comparaison de l'importance du code source.

Quelques spécificités liées au type de graphique Gantt :

La création d'un diagramme de Gantt nécessite la création d'un tableau indexé contenant n tableaux indexés qui représentent un évènement sur la ligne du temps (timeline).

Chaque évènement peut être soit un point (localisé sur la date donnée), soit être une période (localisée sur la date de début et la date de fin).

Le tableau représentant un évènement est structuré de la façon suivante :

Argument Signification
1 Index de la ligne du diagramme
2 Type d'évènement (constante)
3 Légende de la ligne (à gauche de la timeline)
4 La date et l'heure de l'évènement
5 La légende de l'évènement

Revoyons le code correspondant à la création des éléments de notre diagramme :

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

La création du graphique :

 
Sélectionnez
$graph = new GanttGraph();

Le paramétrage 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 méthode ShowHeaders(), on indique les colonnes que l'on souhaite faire apparaître dans l'en-tête du diagramme.

Constantes admises par la méthode 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 méthode CreateSimple() :

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

III-D. Fonctions mathématiques

Autre possibilité avec cette librairie : la création de représentation graphique d'une fonction mathématique.

Une nouvelle fois, les efforts fournis par l'auteur de la librairie afin de faciliter la représentation graphique de fonctions s'avèrent payants puisque là encore, la quantité de code à produire est dérisoire.

N'étant pas un spécialiste de l'algèbre (loin de là...) je prendrai pour l'exemple un cas simple : la représentation graphique de la fonction mathématique x au carré.

Pour créer notre graphique, il faudra inclure les librairies suivantes :
  1. jpgraph.php
  2. jpgraph_line.php
  3. jpgraph_utils.inc.php
La création de ce type de graphique est simple :
  • Création de la fonction à l'aide d'une méthode dédiée
  • Ensuite, génération des différents points qui constitueront notre courbe.
  • Enfin, comme pour un graphique courbe, paramétrage et affichage de la représentation graphique.

Voici le code :

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

// Générer une fonction
$f = new FuncGenerator('$x*$x');

// Créer une série 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 première et dernière légende
$graph->yaxis->HideFirstLastLabel();

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

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

?>

Résultat :

Fonction x au carré
Fonction x au carré

Revenons sur les quelques instructions spécifiques à ce type de graphique :

D'abord création de la fonction mathématique « x au carré » :

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

ensuite vient la création de la liste de points correspondant en passant un point de référence. Ici on utilise un point de coordonnées -9 pour les abscisses et 9 pour les ordonnées. Cette liste de points est composée d'un tableau indexé d'une cinquantaine de valeurs pour chaque axe.
La méthode retourne donc deux tableaux :

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

Le reste ne pose pas de problème particulier, ces notions ayant été abordées auparavant.

Comme nous avons pu le voir dans ce chapitre dédié aux autres types de graphiques, JpGraph offre bon nombre de possibilités, y compris dans des domaines inattendus.


précédentsommairesuivant

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