Plugin phpGraphForPluxml

Après la diffusion de ma bibliothèque de génération de svg, quoi de plus naturel que d'en faire un plugin pour Pluxml pour montrer comment l'intégrer à un projet ?

J'ai beau chercher, je ne vois pas. Donc, je viens de vous écrire un plugin tout beau tout neuf...

Le plugin phpGraphForPluxml

Le but de ce plugin est de pouvoir afficher des données tabulaires sous forme de graphiques en svg dans les articles ou dans les pages statiques.

Configuration :

Pour afficher un graphique, il faut avoir au préalable des données tabulaires, c'est à dire, des données sous forme de tableaux dont la mise en forme générique est la suivante :

	[data]
		(index1,donnée1)
		(index2,donnée2)
		(index3,donnée3)
		(index4,donnée4)
		etc...
	[/data]

Les données sont donc entre deux balises data et sont de la forme index,donnée entre parenthèses.

L'ensemble de ces données doit être placé entre deux balises graph afin que le graphique soit généré :

[graph]
	[data]
		(index1,donnée1)
		(index2,donnée2)
		(index3,donnée3)
		(index4,donnée4)
		etc...
	[/data]
[/graph]

Le graphique généré sera une courbe pleine bleue.

Options des graphiques

Il est possible de changer le type de graphique, la couleur des courbes, etc., via des options.

Ces options doivent être placées entre deux balises options et sont de la forme option,valeur entre parenthèses.

[graph]
	[data]
		(index1,donnée1)
		(index2,donnée2)
		(index3,donnée3)
		(index4,donnée4)
		etc...
	[/data]
	[options]

(type,pie),
(diskLegends,true)

(diskLegendsLineColor,red)
(diskLegendsType,data)

(tooltips,true)
(title,Visites par mois)
[/options]
[/graph]

Les différentes options sont les suivantes :

• 'width' : de type integer (nombre entier) pour fixer la largeur de la grille du graphique
• 'height' : de type integer (nombre entier) pour fixer la hauteur de la grille du graphique
• 'paddingTop' : de type integer (nombre entier) pour fixer l'espace entre le haut du bloc svg et le haut de la grille du graphique
• 'type' : de type chaine de caractères. Les différentes possibilités sont :
  • line, pour que le graphique soit une courbe (non bésier)
  • bar, pour que le graphique soit sous forme d'histogramme
  • pie, pour que le graphique soit sous forme de disque
  • ring, pour que le graphique soit sous forme d'anneau
  • stock, pour que le graphique soit sous forme de graphique "boursier" vertical ou
  • h-stock, pour que le graphique soit sous forme de graphique "boursier" horizontal
• 'steps' : de type integer (nombre entier) pour séparer 2 graduations sur l'axe des ordonnées. "steps" est calculé automatiquement mais il est possible d'en fixer la valeur. Cela n'a pas d'effet sur les graphiques stock et h-stock
• 'filled' : de type booléen (true ou false) pour remplir les graphiques de type line/bar d'une couleur
• 'tooltips' : de type booléen (true ou false) pour afficher les données dans des infobulles au survol du graphique
• 'circles' : de type booléen (true ou false) pour afficher des cercles autour des valeurs sur les graphiques de type line ou bar.
• 'stroke' : de type chaine de caractères de la forme #3cc5f1. Couleur des lignes par défaut. Utilisez un array pour personaliser chaque ligne.
• 'background' : de type chaine de caractères de la forme #ffffff. Couleur de la grille de fond. Ne pas utiliser de notation raccourcie (#fff) qui n'est pas compatible avec la méthode __genColor() de phpGraph.
• 'opacity' : de type float (nombre à virgule) entre 0 et 1. Aucun effet sur les diagrammes de type stock ou h-stock.
• 'gradient' : de type array. 2 couleurs de la gauche vers la droite.
• 'titleHeight' : de type integer (nombre entier) pour la hauteur du titre principal
• 'tooltipLegend' : de type chaine de caractères ou array. Texte affiché dans les infobulles avec les valeurs de l'axe y. Chaque texte peut être personalisé en utilisant un array. Aucun effet sur les diagrammes de type stock ou h-stock.
• 'legends' : de type chaine de caractères ou booléen ou array. Légende générale pour chaque diagramme de type line/bar/disk/ring affichée sous le diagramme
• 'title' : de type chaine de caractères. Titre principal. Le titre sera affiché dans une infobulle également.
• 'radius' : de type integer (nombre entier) pour le rayon des diagrammes de type disk/ring.
• 'diskLegends' : de type booléen (true ou false) pour afficher les données autour des diagrammes de type disk/ring.
• 'diskLegendsType' : de type chaine de caractères. Les choix sont data, pourcent ou label affichés autour des diagrammes de type disk/ring.
• 'diskLegendsLineColor' : de type chaine de caractères de la forme #ffffff ou darkgrey. Couleur des lignes joignant les diagrammes de type disk/ring aux légendes.
• 'responsive' : de type booléen (true ou false) pour que le svg ait des dimensions fixes (le svg ne s'adapte plus à la taille de l'écran).
• 'paddingLegendX' : de type integer (nombre entier) pour l'affichage correct de la légende sous le diagramme.
• 'paddingLegendY' : de type integer (nombre entier) pour l'affichage correct de la légende autour du diagramme.

Exemples de personnalisation :

Le code suivant :

[graph] 
     [data]
(0,(array(2000,0)(2002,25)(2003,32)(2004,1)(2005,58)(2006,31)(2007,79)(2008,51)(2009,54)(2010,12)(2011,17)(2012,14)(2013,13)))
(1,(array(2000,0)(2002,0)(2003,0)(2004,20)(2005,0)(2006,40)(2007,50)(2008,0)(2009,60)(2010,0)(2011,0)(2012,0)(2013,0)))
(2,(array(2000,0)(2002,-20)(2003,-30)(2004,65)(2005,0)(2006,10)(2007,10)(2008,18)(2009,39)(2010,0)(2011,23)(2012,36)(2013,54)))
(3,(array(2000,0)(2002,0)(2003,3)(2004,1)(2005,5)(2006,2)(2007,3)(2008,3)(2009,5)(2010,8)(2011,9)(2012,5)(2013,2)))
(4,(array(2000,7)(2002,39)(2003,26)(2004,36)(2005,18)(2006,32)(2007,56)(2008,38)(2009,103)(2010,105)(2011,126)(2012,125)(2013,76)))
     [/data]
     [options] 
(steps,50)
(filled,false)
(multi,true)
(tooltips,true)
(diskLegends,true)
(diskLegendsType,label)
(diskLegendsLineColor,pink)
(type,array((2,pie)(3,bar)(4,ring)))
(stroke,(array(0,red)(1,blue)(2,orange)(3,green)(4,deeppink)))
(legends,(array(0,Serie 1)(1,Serie 2)(2,Serie 3)(3,Serie 4)(4,Serie 5)))
(tooltipLegend,(array(0,Exemple de légende : )(1,Autre légende : )(2,Légende pour la série 3 : )(3,Exemple pour la série 4 : )(4,Et la série 5 : )))
(title,Amazing phpGraph)
 [/options]
[/graph]

donnera :

Ce dernier :

[graph]
[data]
(Jan,array((open,35)(close,20)(min,10)(max,37)))
(Feb,array((open,28)(close,17)(min,11)(max,32)))
(Mar,array((open,17)(close,25)(min,14)(max,33)))
(Apr,array(open,27)(close,20)(min,11)(max,29)))
(May,array((open,12)(close,25)(min,9)(max,29)))
(Jun,array((open,12)(close,23)(min,4)(max,25)))
(Jul,array((open,20)(close,16)(min,3)(max,22)))
(Aug,array((open,15)(close,29)(min,7)(max,34)))
(Sep,array((open,20)(close,26)(min,9)(max,29)))
(Oct,array((open,28)(close,17)(min,5)(max,31)))
(Nov,array((open,15)(close,29)(min,8)(max,37)))
(Dec,array((open,12)(close,60)(min,10)(max,67)))
[/data]
[options]
(type,stock)
(tooltips,true)
[/options]
[/graph]

Donnera :

Nota Bene :

Les svg générés par le plugin sont exportables en png via un javascript automatiquement ajouté en bas de page, pour les navigateurs récents.À ce jour, il subsiste un léger bug relatif à la génération de l'index des svg multiples, comme dans le premier exemple ci-dessus. Seul le premier graphique est exportable. Je tenterai de corriger ça, mais là, de suite, je vais au dodo

Pour les navigateurs anciens (IE < 10 ), une tentative de conversion des svg en vml est réalisée.
Si la conversion échoue, le plugin affichera soit une zone blanche, soit un png, s'il a préalablement été généré via un navigateur récent.

Le mieux étant quand même de conseiller à vos utilisateurs de télécharger un navigateur digne de ce nom.

À vous de jouer !

N'hésitez pas à remonter les bugs que vous trouverez au niveau du plugin ou de la bibliothèque de génération des svg