Présentation
Ce plugin permet d’insérer des graphes dans SPIP. Il inclut 6 types (courbe, barre, camembert, radar, doughtnut) ainsi qu’une solution pour les vieilles versions d’Internet Explorer.
Ce plugin utilise la bibliothèque javascript http://www.chartjs.org/ crée par Nick Downie.
Basé sur HTML5
Chart.js utilise le javascript et repose sur le tag HTML5 canvas. Il est compatible avec tous les navigateurs modernes et offre un support polyfills pour IE7/8.
Il est aussi responsive par défaut.
Simple et flexible
Chart.js ne dépend pas d’une autre librairie et il est assez léger une fois compressé.
Installation
Le plugin est répertorié dans le dépôt proposé par défaut : « SPIP-Zone - Plugins ». Aussi, il est installable depuis la page Gestion des plugins, onglet Ajouter des plugins si vous avez activé ce dépôt. Pour le retrouver dans la liste des plugins, il vous suffit de rechercher "chartjs".
En cas de besoin, référez-vous à l’article dédié à ce sujet sur spip.net.
Une fois installé, vous pouvez consulter la page de démonstration spip.php?page=demo/demo_chartjs
Utiliser le modèle <chart>
Le plugin introduit un nouveau modèle pour insérer les graphes dans vos articles.
<chart|param1=...|param2=...>
Exemple : Modèle pour un camembert
<chart
|id=camembert1
|canvaswidth=250
|canvasheight=250
|type=pie
|labels=Tôkyô,Kyoto,Osaka,Chiba,Hiroshima
|data=10,32,50,25,5>
Attention la syntaxe est précise, il faut être vigilant lors de la saisie des données.
- Chaque graphe doit comporter les attributs obligatoires id (unique), type
et data ou datasets - Pour les types Pie, Doughnut et PolarArea s’utilisent avec l’attribut data (tableau à 1 dimension)
- Pour les types Bar, Line et Radar s’utilisent avec l’attribut datasets (tableau à plusieurs dimensions). On utilise le mot réservé next pour séparer un jeu de données.
- Les chiffres à virgules sont à indiquer en notation anglaise (avec un point) :
3.14 et non 3,14
Syntaxe complète du modèle <chart>
Le nom des paramètres et leurs valeurs sont en anglais.
Paramètres obligatoires
Paramètres | Exemple | Explications |
---|---|---|
type | pie | Type de graphique, choisir entre pie doughnut radar polararea bar line |
id | camembert23 | identifiant du graphique, il doit être unique et ne pas comporter de caractères spéciaux |
data | 30,50,100 | Données pour les graphes du type pie, doughnut et polarArea |
datasets | 30,50,100 next 20,90,75 | Données pour les graphes du type bar, line et radar Pour séparer un ensemble de données, on utilise le mot séparateur next |
Paramètres facultatifs
Paramètres | Exemple | Explications |
---|---|---|
labels | Jan,Fev,Mars | Légende |
canvaswidth | 500 | Largeur du graphe. Exprimé en px |
canvasheight | 500 | Hauteur du graphe. Exprimé en px |
width | 45% | Largeur du conteneur du graphe. Valeurs possibles auto ou une valeur en unités em, px, % |
height | auto | Hauteur du conteneur du graphe. Valeurs possibles auto ou une valeur en unités em, px, % |
align | right | Alignement du graphe : left center right |
class | no-print | Ajouter une classe supplémentaire au conteneur du graphe |
colors | #E0E4CC,#F38630 | Jeu de couleurs personnalisé |
fillopacity | 0.7 | Opacité du remplissage pour les graphes de type line, bar et polararea |
pointstrokecolor | #FFFFFF | Couleur du point les graphes de type line et polararea |
animation | true | Activer ou non l’animation du graphe |
scaleFontSize | 12 | Taille de police en px |
scaleFontColor | #666 | Change l’échelle de couleur de police |
scaleOverride | false | Si true, le script tente d’appliquer l’échelle. Requiert les paramètres suivants |
scaleSteps | null | requiert scaleOverride=true, Nombre de pas de l’échelle |
scaleStepWidth | null | requiert scaleOverride=true, Valeur du pas de l’échelle |
scaleStartValue | null | requiert scaleOverride=true, Valeur de départ de l’échelle |
scaleLabelUnit | € | Uniquement pour les graphes de type line et bars, pour afficher l’unité à la suite de chaque label |
Usage avancé : utilisation dans des boucles SPIP
Il est aussi possible d’utiliser le plugin dans vos boucles SPIP pour créer des graphes avec des données dynamiques.
Dans ce cas on utilisera la balise #MODELE{chart}
avec les paramètres requis.
Exemple : afficher le cours du yen des 30 derniers jours.
#SET{data,''}
#SET{labels,''}
<BOUCLE_cours(DATA){source simplexml,http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml?#ENV{date}}{datapath root/children/cube/0/children/cube}{0,30}>
#SET{labels, #GET{labels}|concat{",",#VALEUR{attributes/time}|affdate{d/m/y}}}
<BOUCLE_yen(DATA){source tableau,#VALEUR{children/cube}}>[
(#VALEUR{attributes/currency}|=={JPY}|oui)
#SET{data,#GET{data}|concat{",",#VALEUR{attributes/rate}}
]</BOUCLE_yen>
</BOUCLE_cours>
#SET{data,#GET{data}|substr{1}}
#SET{labels,#GET{labels}|substr{1}}
[(#MODELE{chart}{id=coursduyen,type=line,width=auto,height=auto,canvaswidth=850,canvasheight=350,datasets=#GET{data},labels=#GET{labels}})]
Affichera
Discussions par date d’activité
17 discussions
Bonjour,
Ce plugin est vraiment super, merci à son auteur !
J’ai deux questions à son sujet :
1) Est-il possible de mettre un titre au graphique ?
2) Dans le cas où l’on a plusieurs datasets, est-il possible d’afficher une légende pour indiquer quel dataset représente telle ou telle couleur ?
Je vois que tout celà est possible dans la librairie JS : http://www.chartjs.org/samples/latest/charts/line/basic.html mais je ne sais pas si ça a été implanté dans le plugin SPIP ?
Merci !
Ah oui et question supplémentaire : est-il possible de nommer les axes pour que ça apparaisse sur le graphique ?
Le plugin peut évoluer ....
Vous pouvez le reprendre et intégrer d’autres paramètres ou de nouveaux modèles pour intégrer vos besoins.
Oui bien sur, mais je demandais car je n’ai pas vraiment les connaissances pour le faire.
J’essaie de créer un titre à partir de l’id en ajoutant un truc du style
#GETtitle
dans le modèle, mais les espaces sont supprimés.
J’imagine qu’il doit y avoir moyen en créant une nouvelle variable avec une balise #SET à partir de l’id, mais où on ne supprimerait pas les espaces, mais pour l’instant je n’y arrive pas.
Voilà la solution que j’ai trouvée pour le titre :
1) J’ai ajouté dans le modèle (chart.html) :
avant la balise (partie « traitement ») :
2) J’ai formater le canvas de cette manière, pour intégrer le titre au dessus du graphe :
Ca marche, pour autant qu’on utilise pas des caractères spéciaux pour le titre. C’est du bricolage, mais je ne suis pas un dieu du code ;)
Un truc pas mal serait de pouvoir exporter les données (en CSV, TXT ou autre) sur base de celles entrées pour Chart.js. Je vais me creuser les méninges pour voir si c’est possible...
Répondre à ce message
Merci pour ce plugin.
Dans le modèle peut-on utiliser un fichier csv ?
Évidement John le principe est le même. Par exemple voici un modèle qui utilise un fichier CSV chargé sur SPIP, tu peux remplacer #URL_DOCUMENT par le nom de ton fichier en dur si tu préfères.
Répondre à ce message
Bonjour,
Je cherche a envoyé mon graphique par mail....Est ce que quelqu’un a une idée de comment procéder ??? Merci
Répondre à ce message
Excellent plugin !
J’aurais une petite question : est-il envisageable d’intégrer le paramètre legendTemplate ?
Ca serait très utile pour les pies et les donuts !
Merci d’avance ;)
Répondre à ce message
Bonjour
Merci pour cet excellent plugin.
Je cherche à étendre les type de graphique en rajoutant les histogrammes cumulés comme on peut les trouver sur https://github.com/Regaddi/Chart.StackedBar.js
Cependant, je ne vois pas trop comment rajouter ce type dans la mécanique du plugin. Auriez-vous une piste de recherche ?
Hello,
Je crois que le plus simple est de créer un plugin de complément pour intégrer ton nouveau type de graphique :
Si cela marche bien, n’hésite pas à déposer et partager ton plugin sur la zone et contrib.
Bon code !
Répondre à ce message
Ce plugin m’a l’air très bien mais impossible de l’installer. Il semble rentrer en collision avec d’autres plugins.
Peux tu être plus précis, quels plugins ? As tu essayé une installation en désactivant les autres plugins ?
Répondre à ce message
Bonjour,
Un souci pour le lien démo :
Une fois installé, vous pouvez consulter la page de démonstration spip.php ?page=demo/demo_chartjs
demo/demo_chartjs : Accès interdit
la page n’est accessible qu’aux personnes ayant le statut d’admin-webmestre.
pensez aussi à vérifier si vous consultez cette page sur le même nom de domaine (avec ou sans www) que la partie privée (backoffice)
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |