Découverte de la bibliothèque Php JpGraph
Découverte de la librairie Php JpGraph
Date de publication : 22/09/2007 , Date de mise à jour : 24/10/2007
III. Autres types de graphiques
III-A. Anti-spam
III-B. L.E.D.
III-C. Diagramme de Gantt
III-D. Fonctions mathématiques
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:
|
L'image produite :
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 :
|
Image produite :
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 :
|
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 | |
LEDC_GREEN | |
LEDC_BLUE | |
LEDC_YELLOW | |
LEDC_GRAY |
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 :
|
Image produite :
Diagramme de Gantt
Une fois de plus on peut constater que la librairie produit beaucoup de choses en comparaison de la petite taille 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 :
|
La création du graphique :
|
Le paramétrage de l'affichage :
|
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() :
|
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:
- jpgraph.php
- jpgraph_line.php
- 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, la création des différents points qui constitueront notre courbe.
- Enfin, exactement comme pour un graphique courbe vu dans les exemples précédents, paramétrage et affichage de la représentation graphique.
Voici le code :
|
Résultat :
Fonction x au carré
Revenons sur les quelques instructions spécifiques à ce type de graphique :
Création de la fonction mathématique « x au carré » :
|
Puis création de la liste de points correspondant en passant un point de référence ici 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 :
La méthode retourne donc deux tableaux :
|
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.