SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 236 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Plugin Chart.js > Chart.js

Chart.js

1er octobre 2014 – par erational – 11 commentaires

17 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

  1. <chart
  2. |id=camembert1
  3. |canvaswidth=250
  4. |canvasheight=250
  5. |type=pie
  6. |labels=Tôkyô,Kyoto,Osaka,Chiba,Hiroshima
  7. |data=10,32,50,25,5>

Télécharger

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.

  1. #SET{data,''}
  2. #SET{labels,''}
  3. <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}>
  4. #SET{labels, #GET{labels}|concat{",",#VALEUR{attributes/time}|affdate{d/m/y}}}
  5. <BOUCLE_yen(DATA){source tableau,#VALEUR{children/cube}}>[
  6. (#VALEUR{attributes/currency}|=={JPY}|oui)
  7. #SET{data,#GET{data}|concat{",",#VALEUR{attributes/rate}}
  8. ]</BOUCLE_yen>
  9. </BOUCLE_cours>
  10. #SET{data,#GET{data}|substr{1}}
  11. #SET{labels,#GET{labels}|substr{1}}
  12. [(#MODELE{chart}{id=coursduyen,type=line,width=auto,height=auto,canvaswidth=850,canvasheight=350,datasets=#GET{data},labels=#GET{labels}})]

Télécharger

Affichera

Voir en ligne : http://plugins.spip.net/chartjs

P.-S.

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

Dernière modification de cette page le 29 octobre 2015

Retour en haut de la page

Vos commentaires

  • Le 15 octobre 2015 à 17:47, par John mivi En réponse à : Chart.js

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

    • Le 20 octobre 2015 à 15:58, par John mivi En réponse à : Chart.js

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

    Répondre à ce message

  • Le 25 juillet 2015 à 14:09, par Manou En réponse à : Chart.js

    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

  • Le 29 octobre 2014 à 11:20, par Chourak En réponse à : Chart.js

    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

  • Le 27 mai 2015 à 14:09, par PeioJ En réponse à : Chart.js

    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 :

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

    par

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

    Répondre à ce message

  • Le 15 décembre 2014 à 23:01, par Amaury Adon En réponse à : Chart.js

    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 ?

    • Le 16 décembre 2014 à 06:43, par erational En réponse à : Chart.js

      Hello,
      Je crois que le plus simple est de créer un plugin de complément pour intégrer ton nouveau type de graphique :

      • dans le paquet.xml de ton plugin indique que le plugin chartjs est requis
      • sur le même modèle que le plugin, ajoute les fonctions qui permettent d’insérer le code js supplémentaire Chart.StackedBar.js
      • sur le même modèle que le plugin, créer un nouveau modèle (ou surcharge le modèle existant graphe) pour ajouter ton nouveau type de graphe.

      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

  • Le 26 octobre 2014 à 13:30, par cyberbougnat En réponse à : Chart.js

    Ce plugin m’a l’air très bien mais impossible de l’installer. Il semble rentrer en collision avec d’autres plugins.

    • Le 27 octobre 2014 à 07:41, par erational En réponse à : Chart.js

      Peux tu être plus précis, quels plugins ? As tu essayé une installation en désactivant les autres plugins ?

    Répondre à ce message

  • Le 1er octobre 2014 à 20:51, par Jaseur Boreal En réponse à : Chart.js

    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

    • Le 1er octobre 2014 à 21:13, par erational En réponse à : Chart.js

      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

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Social tags

    8 septembre 2008 – 429 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Réservation d’événements

    16 mars 2015 – 191 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Le plugin FreeRadio 1.0

    25 mai 2011 – 29 commentaires

    Le plugin SPIP FreeRadio est un lecteur de flux audio gratuit à intégrer dans le corps des articles. Il permet de se mettre « à l’écoute » de WebRadios ou de sons à partir de leurs URL. FreeRadio est écrit en actionscript. Facile à intégrer, il est (...)

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

Ça spipe par là