Vous êtes ici : Accueil > Gérer son site > Utilisation des plugins de la plate-forme > Créer des courbes, diagrammes en barres, circulaires ou autres à l’aide du (...)
Publié : 8 novembre 2009
Format PDF Enregistrer au format PDF

Créer des courbes, diagrammes en barres, circulaires ou autres à l’aide du plugin JpGraph

Le plugin JpGraph pour SPIP permet de créer en quelques lignes de code divers graphiques qui vous permettront d’agrémenter vos articles, voire faire travailler vos élèves sur des notions de représentations de données statistiques.

Le fonctionnement du plugin

Ce plugin utilise la technologie des modèles SPIP afin de vous permettre de créer des graphiques à l’aide de la librairie graphique JpGraph.

Au moment de rédaction de cet article, les graphiques réalisables sont :
- courbes
- courbes multiples
- diagrammes circulaires
- diagrammes circulaires en 3 dimensions
- diagrammes en barres
- diagrammes en barres multiples
- diagrammes en barres accumulées
- histogrammes
- diagrammes en batons
- repères et points
- radar simple
- radar multiple à 2 ou 3 séries

Cette liste sera ultérieurement complétée par d’autres types de graphiques et documentée.

La documentation

Actuellement, 6 articles sont disponibles :
Documentations :
- Présentation générale du plugin
- Le référentiel
- Exemples avancés de créations de courbes
- Exemples avancés de créations de diagrammes en barres
- Exemples avancés de créations de diagrammes circulaires
- Exemples avancés avec d’autres types de graphiques

Quelques exemples

Un diagramme circulaire

Ce graphique représente la situation de la plate-forme SPIP mutualisée à la fin octobre 2009.

Indication au sujet de la légende du diagramme :
- Projets académiques : il s’agit des pôles disciplinaires et autres projets spécifiques
- Formations, autres : on trouve parmi ces sites des sites d’accompagnement et de formation, des sites créés pour les tests de certains formateurs ou personnes de la mission TICE.

<jpgraph |type_graphe=camembert3d |titre=Sites créés par types d'établissements|donnee=55;27;10;10;8 |largeur=450 |hauteur=400 |legende=Colleges;Lycees;Ecoles;Projets academiques;Formations, autres |couleur=#a52a2a;sand |option=resolution_fine>

Code ayant généré ce graphique :

<jpgraph
|type_graphe=camembert3d
|titre=Sites créés par types d'établissements
|donnee=55;27;10;10;8
|largeur=450
|hauteur=400
|legende=Colleges;Lycees;Ecoles;Projets academiques;Formations, autres
|couleur=#a52a2a;sand
|option=resolution_fine>

Un diagramme en barre

<jpgraph |type_graphe=barre |titre=Sites créés sur la plate-forme SPIP mutualisée|donnee=3;6;3;18;14;19;13;3;0;18;12;14 |legende=2008;J;F;M;A;M;J;J;A;S;O;N |largeur=450 |hauteur=400 |couleur=cornflowerblue;cornflowerblue;darkblue>

Code ayant généré ce graphique :

<jpgraph
|type_graphe=barre
|titre=Sites créés sur la plate-forme SPIP mutualisée
|donnee=3;6;3;18;14;19;13;3;0;18;12;14
|legende=2008;J;F;M;A;M;J;J;A;S;O;N
|largeur=450
|hauteur=400
|couleur=cornflowerblue;cornflowerblue;darkblue>

Une courbe

<jpgraph |type_graphe=courbe |titre=Sites créés sur la plate-forme SPIP mutualisée|donnee=3;6;3;18;14;19;13;3;0;18;12;14 |legende=2008;J;F;M;A;M;J;J;A;S;O;N |largeur=450 |hauteur=400 |couleur=cornflowerblue;cornflowerblue;darkblue>

Code ayant généré ce graphique :

<jpgraph
|type_graphe=courbe
|titre=Sites créés sur la plate-forme SPIP mutualisée
|donnee=3;6;3;18;14;19;13;3;0;18;12;14
|legende=2008;J;F;M;A;M;J;J;A;S;O;N
|largeur=450
|hauteur=400
|couleur=cornflowerblue;cornflowerblue;darkblue>

Un histogramme

Code ayant généré ce graphique :

<jpgraph
|type_graphe=courbe
|titre=Sites créés sur la plate-forme SPIP mutualisée
|donnee=3;6;3;18;14;19;13;3;0;18;12;14;0
|legende=2008;J;F;M;A;M;J;J;A;S;O;N;D
|largeur=450
|hauteur=400
|couleur=cornflowerblue;cornflowerblue;darkblue
|option=histogramme>

Un diagramme en batons

Code ayant généré ce graphique :

<jpgraph
|type_graphe=baton
|titre=Sites créés sur la plate-forme SPIP mutualisée
|donnee=3;6;3;18;14;19;13;3;0;18;12;14
|legende=2008;J;F;M;A;M;J;J;A;S;O;N
|largeur=450
|hauteur=400
|couleur=cornflowerblue;cornflowerblue;darkblue
|marqueur=carre;6;purple;blue>

Des points dans un repère

Code ayant généré ce graphique :

<jpgraph
|type_graphe=point
|titre=Un exemple de points placés dans un repère
|donnee=-5;-3;0;2;3.5;7
|donneedeux=-5;0;-2;3;-3.2;-4
|legendetrois=Axe des abscisses;Axe des ordonnées
|largeur=450
|hauteur=400
|marqueur=croix_x;8;red>

Un graphique de type radar

Code ayant généré ce graphique :

<jpgraph
|type_graphe=radar
|titre=Noisettes collectées
|donnee=45;27;18;4;21;64
|donneedeux=55;47;48;34;41;34
|donneetrois=25;57;58;64;51;24
|largeur=450
|hauteur=450
|legende=Spip;Tic;Tac;Loulou;Riri;Fifi
|legendedeux=Septembre;Octobre;Novembre
|couleur=orange;red@0.5
|marqueur=triangle;6;blue;yellow
|couleurdeux=green;green@0.5:0.6
|marqueurdeux=carre;6;green;green:0.6
|couleurtrois=blue;purple@0.5
|marqueurtrois=etoile;6;purple;purple
|option=graphe_ombre>