Chart.js - commentaires

Chart.js

Merci pour ta réponse ;)

Entre l'API qui ne fonctionnait plus (j'ai donc utilisé un fichier local pour mes tests), et ma mauvaise compréhension de SPIP (mélanger entre la rédaction d'articles et les fichiers html de spip, en voyant qu'il fallait utiliser le code dans « usage avancé » pour faire un modèle (dans modeles/), cf https://www.spip.net/fr_article3454.html si ça peut aider quelqu'un), ça ne pouvait en effet fonctionner.
J'ai réussi à faire un premier graphique, et maintenant, il ne reste donc plus qu'à persévérer pour l'améliorer et utiliser les données voulues.

Chart.js

Bonjour,

L'API donnée en exemple ne retourne plus rien en effet : http://www.ecb.europa.eu/stats/eurofxref/eurofxref-hist-90d.xml
Peut-être que l'adresse a changé, ou peut-être qu'il faut maintenant une clé…

Mais le principe est le même pour n'importe quelle API : il « suffit » de boucler dessus pour construire un tableau qui va agencer les données au format attendu par le plugin.

Et là tout dépend de l'API en question, selon qu'elle retourne du JSON, du CSV, etc.

Chart.js

Bonjour,

J'ai essayé d'inclure le code présent dans Usage avancé : utilisation dans des boucles SPIP dans un article sur mon site (directement et dans la div class=« chartjs ») ainsi qu'en passant via un squelette et la balise inclure, mais sans succès.

Est-ce l'un de vous pourrait préciser comment incorporer un graphique faisant appel à une API (par exemple celui-ci) dans un article, en explicitant la marche à suivre ?

Versions : chart.js 2.1.2, Spip 4.2.2 avec une compatibilité forcée 4.1.0

Chart.js

Je le met ici parce que j'ai cherché :
Pour entrer les labels de chaque jeu de données de graphique à barre, on utilise la variable « dataLabels »

Exemple :

Chart.js

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 :

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

Chart.js

Voilà une page contenant 2 graphes.
Acces : invite / invite

Chart.js

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 ?

Chart.js

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=#VALEUR,labels=#VALEUR})]

[(#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 2^d 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 1^er graphe.

Chart.js

Bonjour,

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

Chart.js

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.


     Graphique 1 Graphique 2

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

Chart.js

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) !

Chart.js

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.

Chart.js

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={#VALEUR},labels=#VALEUR})]

Et merci encore pour cet outil génial !

Chart.js

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 1^re 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

Chart.js

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

Chart.js

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 , ç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 :)

Chart.js

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

Chart.js

Ok alors je regarderais et je tiens au courant.

Chart.js

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

Chart.js

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.

Chart.js

Oui volontiers ... Tu t'en charges ?

Chart.js

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 ?

Chart.js

Merci pour ta contribution !

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

Chart.js

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 ?

Afficher une valeur input ds variable nb_ans
 

 #SET{nb_ans,#ENV{texte2}} 
 Tableau de bord #SET{nb_artEmploi,0}

#SET{nb_artEmploi,#TOTAL_BOUCLE}  #SET{nb_artForm,0}
 #SET{nb_artForm,#TOTAL_BOUCLE}  #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}})]

Chart.js

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.

Chart.js

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 !

Chart.js

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 :

  #GET{titre}

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

Chart.js

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.

Chart.js

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.

Chart.js

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

Chart.js

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 !

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,''}   0}> [(#CLE|is_numeric|oui) #SET{labels, #GET{labels}|concat{",",#VALEUR} ] [(#CLE|is_numeric|oui) #SET{data,#GET{data}|concat{",",#VALEUR|}} ]   
#SET{labels,#GET{labels}|substr{1}} #SET{data,#GET{data}|substr{1}} 
[(#MODELE{chart}{id=coursduyen,type=#ENV{type},width=auto,height=auto,canvasheight=350,datasets=#GET{data},labels=#GET{labels}})]

Chart.js

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

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

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 :

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

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 !

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 ?

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 ;)

Chart.js

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

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.

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)

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