Chart.js

<:galactic_contrib:dernieres_discussions_par_date>

8 discussions

• 4

  

  Jol.Gloubi

  il y a 3 mois

  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

    il y a 3 mois

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

  • 

    erational

    il y a 3 mois

    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

    il y a 3 mois

    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

    il y a 3 mois

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

  Répondre à ce message

• 1

  

  John mivi

  Octobre 2015

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

  • 

    John mivi

    Octobre 2015

    É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

• 

  Manou

  Juillet 2015

  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

• 

  Chourak

  Octobre 2014

  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

• 

  PeioJ

  Mai 2015

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

  Répondre à ce message

• 1

  

  Amaury Adon

  Décembre 2014

  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 ?

  • 

    erational

    Décembre 2014

    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

• 1

  

  cyberbougnat

  Octobre 2014

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

  • 

    erational

    Octobre 2014

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

  Répondre à ce message

• 1

  

  Jaseur Boreal

  Octobre 2014

  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

  • 

    erational

    Octobre 2014

    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