ACCUEIL > TUTORIAUX SPIP

LE PLUGIN PB CHARTS

   

Si vous savez faire ça :

Un beau tableau 1992
Valeur 1 12.5 13.6 15
Valeur 2 13.6 11.12 9
Valeur 3 14.7 12.5 13

alors vous n’aurez pas de mal à faire cela :

Pour rappel, le tableau se code dans SPIP avec les barres verticales (pipes) ainsi :

vous pouvez facilement transformer ce tableau en graphique ainsi :

- On supprime le gras (ainsi que tous enrichissements typographiques éventuels).

- On encadre le tableau entre les mentions :

Le « type » est à choisir parmi toutes les possibilités offertes par SWF/XML Charts de Maani. Vous trouverez de nombreux exemples ci-dessous.

- La règle est simple : outre une éventuelle ligne de déclaration du titre du graphique (deux barres verticales en début et fin de ligne), il faut retenir que la première ligne de valeurs définit les noms des colonnes (« 1992 », « 1993 », « 1994 ») ; la première colonne de valeurs définit les titres des séries (« Valeur 1 »...).

La seule difficulté, en pratique, se rencontre lorsqu’il n’y a qu’une seule série de valeurs. C’est systématiquement le cas, par exemple, dans le cas des « Camemberts » (Pie). Dans ce cas, il ne faut pas oublier de prévoir cette première colonne, quitte à la laisser vide.

Et maintenant, voici une belle collection de graphiques :

Installation du plugin

Le plugin utilisant XML/SWF Charts de Maani, qui n’est pas libre, je ne peux pas livrer tous les fichiers directement.

- Récupérez, décompactez et installez le plugin PB Charts.

Zip - 16.6 ko

- Rendez-vous dans l’espace « Download » de Maani ; récupérez l’une des archives, décompactez l’archive.
- Installez le contenu le fichier « charts.swf » et le dossier « charts_library » dans le dossier « pb_charts/charts » du plugin.
- Activez le plugin.

Sur le site public

Vous avez la possibilité de personnaliser les couleurs et les dimensions des graphiques sur le site public, en modifiant les variables globales (dans mes_fonctions.php par exemple) suivantes :
- couleur_claire définit la couleur de la première série ; les autres couleurs sont calculées automatiquement avec mes scripts de roue chromatique ;
- couleur_texte définit la couleur du texte des légendes ;
- largeur_charts et hauteur_charts définissent les dimensions d’affichage des graphiques.


Un message, un commentaire ?
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)