Chart.js

Published : 1 October 2014 – updated on 21 December 2021 – by erational – 38 commentaires

1
2
3
4
5
27 Votes

Permet de créer des jolis graphiques dans SPIP.
Souple et léger, il inclut 6 types de graphes customisables pour les rédacteurs et concepteurs de squelettes.

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ètresExempleExplications
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ètresExempleExplications
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

Merci aussi aux concepteurs du plugin Wordpress dont nous avons utilisé une partie de la syntaxe.

Discussion

5 years 1 year 3 months Without limit
par date
Filter

15 discussions

  • 5
    Nicolas

    Nouveau blocage dans l’usage des graphiques : je ne parviens pas à afficher plus d’1 graphique par page.

    Quand 2 graphiques figurent sur la page, un seul est visible.
    En passant le pointeur sur les éléments de ce graphique, le second apparaît fugacement puis disparaît : le second graphique est bien calculé et est bien présent sur la page, mais il est affiché sous le premier qui le masque.

    J’ai essayé d’insérer les 2 graphiques au sein d’une page HTML toute simple pour vérifier que mon squelette n’interférait pas : même résultat.

    <!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
   </head>
   <body>
      Graphique 1
      Graphique 2
   </body> 
</html>

    C’est vraiment super dommage.
    Suis-je le seul à rencontrer ce souci ?

    • Pierre KUHN

      Bonjour,

      Il faut passer à ton inclure id_chartjs=X avec un numéro unique de mémoire

    • Nicolas

      Merci Pierre,

      Tu parles de l’id des graphes ?
      Si oui, mes 2 graphes ont déjà des id différentes.

      [(#MODELE{chart}{id=frequence,align=center,colors=#9bf1ff,scaleFontColor=white,fontSize=16,type=bar,datasets=<BOUCLE_f1(DATA){source table, #GET{occurrence}}{","}>#VALEUR</BOUCLE_f1>,labels=<BOUCLE_e1(DATA){source table, #GET{annee2}}{","}>#VALEUR</BOUCLE_e1>})]
      [(#MODELE{chart}{id=graphedetest,align=center,colors=#9bf1ff,scaleFontColor=white,fontSize=16,type=bar,datasets=22,33,55,labels=ZZ,AA,RR})]


      Précision : le 2nd graphe s’affiche par-dessus le précédent quelle que soit sa place dans le code ; même séparés par du contenu HTML (et même en toute fin du body) les 2 graphes superposés s’affichent à l’endroit où est codé le 1er graphe.

    • Pierre KUHN

      Bonjour,

      Je n’ai pas le problème mais est ce qu’il ne manquerais pas des div au tour de chaque modèle ?
      On peut voir le site ?

    • Nicolas

      Un grand merci à Pierre Kuhn qui a résolu l’affichage multiple de graphes, en y consacrant beaucoup de temps et de patience.

      Le code suivant permet tous les affichages de graphes sur une même page :

      <div class="chartjs">
	[(#INCLURE{fond=modeles/chart,id=ID-DU-GRAPHE,type=bar,width=850,height=350,data=#GET{ordonnees}|implode{','},labels=#GET{abscisses}|implode{','}})]
</div>

    Reply to this message

  • 1
    Nicolas

    Re,

    Là, je ne parviens pas à voir où changer la couleur les valeurs en abscisses et en ordonnées ; je suppute une liaison avec le thème installé mais comme cette couleur (un gris foncé) n’est pas visible sur les pages du thème, je me questionne.
    J’ai changé toutes les couleurs dans la feuille de style lib/chartjs/samples/style.css , sans résultat.
    Je sèche.

    • Nicolas

      Le fichier plugin > chartjs > modeles > chart.html est en fait une documentation exhaustive de toutes les consignes de configuration qui me manquaient (et qui ne figurent pas dans la doc ci-dessus) !

    Reply to this message

  • 1
    Nicolas

    Salut,

    Je découvre cette extension qui allume plein de petites lumières dans mes yeux !

    Les tests dans un squelette avec des valeurs prédéfines fonctionnent parfaitement :

    #SET{annee, "1,5,9,7,3"}
#SET{occurrence, "233,111,89,413,149"}
[(#MODELE{chart}{id=test,type=line,datasets=#GET{occurrence},labels=#GET{annee}})]

    Je me lance pour de bon afin de calculer des fréquences de mots-clés présents sur des articles selon l’année de ces articles.
    Sur un mot au hasard, mes 2 tableaux Occurrence et Année donnent par exemple :

    [(#GET{occurrence}|foreach)]

    Occurrence
    0=> ,1
    1=> ,1
    2=> ,2
    3=> ,1
    4=> ,1
    5=> ,1
    6=> ,1
    7=> ,2
    8=> ,2
    9=> ,1
    10=> ,1
    11=> ,1
    12=> ,1
    13=> ,1

    [(#GET{annee}|foreach)]

    Annee
    0=> ,1980
    1=> ,1982
    2=> ,1984
    3=> ,1986
    4=> ,1987
    5=> ,1988
    6=> ,1989
    7=> ,1993
    8=> ,1995
    9=> ,1996
    10=> ,2006
    11=> ,2007
    12=> ,2013
    13=> ,2021

    Je pense avoir compris qu’il faut supprimer la 1re virgule du tableau, comme sur l’exemple sur le cours du yen.

    #SET{occurrence,#GET{occurrence}|substr{1}}
#SET{annee,#GET{annee}|substr{1}}
[(#MODELE{chart}{id=frequence,type=line,datasets=#GET{occurrence},labels=#GET{annee}})]

    Mais avec ce code, aucun affichage du graphe, rien, pas un pixel.

    Je tente des trucs, dont :

    • placer les virgules après les valeurs, puis virer la dernière virgule avec 
      |substr{0,-1}
    • enlever toutes les virgules (le cadre du graphe s’affiche, ainsi que les années en abscisses mais rien en ordonnées)
    • Etc.

    Bref, je n’arrive à rien ; si vous avez une idée, je prends.

    — -

    • SPIP 4.1.1
    • PHP 7.4
    • Chart.js 2.1.1
    • Nicolas

      Je me réponds, ayant trouvé une astuce fonctionnelle moins technique mais plus simple : insérer une bête boucle avec le critère

      {","}

      pour séparer proprement par des virgules les valeurs à passer dans le graphe, sans un avoir une en début ou en fin de liste.

      L’appel du graphe donne ça :

      [(#MODELE{chart}{id=frequence,type=bar,datasets={<BOUCLE(DATA){source table, #GET{occurrence}}{","}>#VALEUR</BOUCLE>},labels=<BOUCLE(DATA){source table, #GET{annee}}{","}>#VALEUR</BOUCLE>})]

      Et merci encore pour cet outil génial !

    Reply to this message

  • 7
    Eric Lupinacci

    Hello,

    Est ce qu’il ne serait pas temps de passer à la version stable 2.9.3 de la librairie sachant que la 3.0.0 est en pré-release ?

    • erational

      Oui volontiers ... Tu t’en charges ?

    • Eric Lupinacci

      Je pourrais mais comme je ne l’ai pas encore utilisé je pense que ça serait mieux si tu pouvais vérifier d’abord que ça fonctionne toujours.

    • erational

      Moi pareil, cela fait 6 ans que c’est codé.
      Si l’article demo est fonctionnel, c’est bon.

    • Eric Lupinacci

      Ok alors je regarderais et je tiens au courant.

    • Matthieu Marcillaud

      Ça serait bien que le JS ne soit pas chargé par défaut sur toutes les pages aussi. Que ça soit une option éventuellement.

    • Matthieu Marcillaud

      Voilà, il faudra que vous testiez les derniers commits.
      Je suis passé en version 3.0.0-alpha.

      Les scripts .js ne sont plus chargés par défaut partout (sauf si on le configure explicitement) (j’ai laissé le CSS par contre, car c’est juste quelques petites lignes).
      Lorsqu’on appelle le modèle <chart|>, ça charge automatiquement le script s’il n’est pas chargé (1 seule fois), à la manière qui était faite dans GIS.

      Faudra peut être en faire une version tagguée :)

    • tcharlss

      La v2.0.5 est taguée avec la lib v3 en beta, mais l’état est toujours en dev (c’était surtout pour goony).

      J’aimerais faire une dernière évolution avant de passer en test et documenter, si vous avez des avis n’hésitez pas : https://git.spip.net/spip-contrib-extensions/chartjs/issues/1

    Reply to this message

  • 1
    PeioJ

    Bonjour,

    J’ai eu un souci pour intégrer la balise #MODELEchart dans une boucle MOTS.
    En effet, l’id du Mot entrait en conflit avec l’id du graphique via #ENVid, qui me renvoyait le numéro de l’article au lieu de l’identifiant du graphique, d’où bug et pas d’affichage.

    J’ai tourné ma boucle dans tous les sens, mais je n’ai pas trouvé de parade.

    En attendant, j’ai triché en modifiant le fichier chart.html, en changeant la ligne :

    #SET{title,chart}      [(#ENV{id}|oui) #SET{title,#ENV{id}|trim}]

    par

    #SET{title,chart}      [(#ENV{chart_id}|oui) #SET{title,#ENV{chart_id}|trim}]

    Et du coup, au lieu de préciser un id en paramètre de mes graphs, je précise un chart_id et le conflit a disparu.

    ça marche, mais je ne suis pas très sûr de mon coup. Si quelqu’un a un avis...

    • jd1278

      Merci pour ta contribution !

      En effet, c’est nécessaire également chez moi, sinon il refusait d’afficher plus d’un graphique par page.

    Reply to this message

  • rcg

    Bjr

    J’ai essayé un code que voici mais je ne comprends pas pourquoi ma valeur de Input ne passe dans ENV et puis SET ? Je ne reçois aucun msg d’erreur. Pouvez m’aider et me donner une explication ?

    <h3>Afficher une valeur input ds variable nb_ans</h3>
 
<form>
<input type="text" id="texte2"  name="texte2" size="30" value="#ENV{texte2}">
</form>
 
#SET{nb_ans,#ENV{texte2}}
 
<br />
 
<h1>Tableau de bord</h1>	
 
#SET{nb_artEmploi,0}
<BOUCLE_artEmploi(ARTICLES) {id_rubrique=55} {annee=#GET{nb_ans}}>
</BOUCLE_artEmploi>#SET{nb_artEmploi,#TOTAL_BOUCLE} 
</B_artEmploi>
 
#SET{nb_artForm,0}
<BOUCLE_artForm(ARTICLES){id_rubrique=29} {annee=2020}> 
</BOUCLE_artForm>#SET{nb_artForm,#TOTAL_BOUCLE} 
</B_artForm>
 
#SET{data,#GET{nb_artEmploi}|concat{",",#GET{nb_artForm}}} 
#SET{labels,"Emploi , Formation "}
 
[(#MODELE{chart}{id=barrespip,type=pie,canvaswidth=350,canvasheight=350,data=#GET{data},labels=#GET{labels}})]

    Reply to this message

  • rcg

    Bjr
    j’ai besoin de faire un graphique pie a partir d’article que je souhaite pouvoir sélectionner par Annee mais en saisissant par l’utilisateur l’année à présenté en graphe . Je ne vois pas la solution simple.

    Reply to this message

  • Thrax

    Bravo pour ce plugin bien utile pour mettre des beaux graphismes. Ne dit-on pas qu’une belle image vaut mille mots ? Et là, c’est sans maux, tellement c’est simple !

    Reply to this message

  • 4
    Jol.Gloubi

    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 !

    • Jol.Gloubi

      Ah oui et question supplémentaire : est-il possible de nommer les axes pour que ça apparaisse sur le graphique ?

    • erational

      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.

    • Jol.Gloubi

      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.

    • Jol.Gloubi

      Voilà la solution que j’ai trouvée pour le titre :

      1) J’ai ajouté dans le modèle (chart.html) :

      #SET{titre,#GET{title}}

      avant la balise (partie “traitement”) :

      #SET{title,#GET{title}|replace{" ",""}}

      2) J’ai formater le canvas de cette manière, pour intégrer le titre au dessus du graphe :

      <dl class="chartjs_responsive">
	<dt class="spip_doc_titre">
		<strong>#GET{titre}</strong>
	</dt>
	<dt>
		<div class="spip-chart-wrap [spip-chart-align-(#GET{align})] [(#GET{class})]" 
		style="max-width:100%;width:[(#GET{width}|!={null}|?{#GET{width},#GET{canvaswidth}px})];height:[(#GET{height}|!={null}|?{#GET{height},#GET{canvasheight}px})];"><canvas id="#GET{title}" height="#GET{canvasheight}" width="#GET{canvaswidth}" class="spip-chart-canvas"></canvas></div>
	</dt>
</dl>

      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...

    Reply to this message

  • 1
    John mivi

    Merci pour ce plugin.
    Dans le modèle peut-on utiliser un fichier csv ?

    • John mivi

      É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.

      #SET{data,''}
#SET{labels,''}

<BOUCLE_doccsvchart(DOCUMENTS){id_document=#ID}>
        <B_csvchart3>
                <BOUCLE_csvchart3(DATA) {source csv, #URL_DOCUMENT, csv}{cle>0}>
                        <BOUCLE_linelabels(DATA){source tableau,#VALEUR}{0,1}>[(#CLE|is_numeric|oui)
                        #SET{labels, #GET{labels}|concat{",",#VALEUR}
                        ]</BOUCLE_linelabels>
                        
                        <BOUCLE_linedata(DATA){source tableau,#VALEUR}{1,2}>[(#CLE|is_numeric|oui)
                        #SET{data,#GET{data}|concat{",",#VALEUR|}}
                        ]</BOUCLE_linedata>
                        
                </BOUCLE_csvchart3>
        </B_csvchart3>                                
</BOUCLE_doccsvchart>
#SET{labels,#GET{labels}|substr{1}} 
#SET{data,#GET{data}|substr{1}}

<div class="table-responsive">
[(#MODELE{chart}{id=coursduyen,type=#ENV{type},width=auto,height=auto,canvasheight=350,datasets=#GET{data},labels=#GET{labels}})]
</div>

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom