chart ~ graphiques statistiques

Cette action permet de mettre en oeuvre facilement les graphiques les plus utilisés proposés par GoogleChart

➠ chart : Graphiques statistiques avec GoogleChart

Cliquer pour lire la documentation

syntaxe {up chart=type_chart}... data ...{/up chart}
author LOMART version UP-1.8 license GNU/GPLv3 credit https://developers.google.com/chart/interactive/docs tags Widget
  • chart: type de chart : area, bar,bubble,column,combo,line,pie,scatter,SteppedArea
  • separator: séparateur des valeurs dans la liste
  • vertical = 0: horizontal par défaut ou vertical
  • area: valeur en % dans l'ordre : left, top, width, height. EX: 10,25,90,75
  • maximized = 0: affichage remplit le bloc
  • colors: liste des couleurs
  • title (titre):
  • title-position: in, out, none (defaut)
  • title-style: color: 'blue', fontsize: '14px', bold:true (attention à la syntaxe)
  • legend-position: in, none (defaut), top, bottom
  • legend-style: ex: color:'blue',fontSize:14,bold:true
  • bar-width: largeur des barres en %
  • 3D = 0: camembert en relief
  • donut = 0: part du trou central. ex: 0.5 pour la moitié
  • isstacked: 0, true (absolute) ou relative
  • height (h,hauteur): min-height bloc parent
  • options: chaine JSON des options (remplacer {} par [])
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • css-head (base-css): style ajouté dans le HEAD de la page


    Area


    Bar


    Bubble


    Column


    Combo


    Line


    Pie


    Scatter


    SteppedArea


    Le principe


    Pour afficher le camembert  à gauche qui montre les taux d'utilisation des navigateurs Internet en 2019, il suffit de mettre les données comme contenu d'un shortcode avec le type de graphique comme argument principal.

    La première ligne définit toujours les étiquettes des données (Navigateur, 2019). Les lignes suivantes contenant les données séparées par une virgule.

    J'ai ajouté une bordure grise pour montrer l'emprise du graphique

    {up chart=Pie}
    Navigateur,2019
    Chrome,57.4
    Safari,13.5
    IE et Edge,6.8
    Firefox,6.8
    Opera,2.4
    {/up chart}


    Essayons d'améliorer le rendu avec quelques options.

    title permet d'ajouter un titre

    area permet de définir la mise en page en indiquant, dans cet ordre, la marge gauche, la marge haute, la largeur puis la hauteur. Les valeurs indiquées sont relatives.

    Notre graphique a déjà meilleure allure !

    {up chart=Pie
    | title=Taux d'utilisation des navigateurs Internet en 2019
    | area=2,15,98,85}
    Navigateur,2019
    Chrome,57.4
    ...
    {/up chart}


    L'action "chart" propose des options pour les personnalisations les plus courantes. colors permet de spécifier dans l'ordre les couleurs pour les séries, donut met un trou de 30% au milieu de notre camembert.

    La grande majorité des options disponibles dans l'API Google peuvent être mises comme arguments de l'option "options" en ayant soin de remplacer les accolades {} par des crochets []. Pour forcer un crochet, on l'échappe avec un antislash : \[ ou \]
    Dans notre exemple, nous tournons notre camembert selon les informations trouvées sur cette page. Et nous mettons en évidence la part de Firefox en utilisant ces infos.

    Attention, aucun contrôle n'est effectué sur votre saisie. A la moindre erreur, aucun graphique de la page ne sera affiché !

    {up chart=Pie
    | title=Taux d'utilisation des navigateurs Internet en 2019
    | area=2,15,98,85
    | colors=green,indigo,#369,#FF8C00,red
    | donut=.3
    | options=pieStartAngle:90,slices: [3:[offset: 0.2],]
    }
    Navigateur,2019
    Chrome,57.4
    ...
    {/up chart}


    Pour changer de type de graphique, il suffit de modifier l'argument principal de l'action.

    Toutefois, tous les types ne partagent pas les mêmes options ou les traitent de façon différente. Prenons pour exemple, la conversion de notre camembert en colonnes. La gestion des couleurs n'utilise pas le mécanisme de la liste de couleurs, mais demande que la couleur soit indiquée dans les données.

    Pour cela, nous ajoutons dans la première ligne des données le mot clé ##color## pour spécifier le contenu de la colonne. Le graphique en colonnes permettant de mettre un libellé dans la colonne, nous ajoutons aussi le mot clé ##label##.
    La dernière étape est d'ajouter les couleurs et les étiquettes à la suite des données

    {up chart=Column
    | title=Taux d'utilisation des navigateurs Internet en 2019
    | height=400 | area=2,15,98,75} Navigateur,2019,##color##,##label## Chrome,57.4,green,Chrome Safari,13.5,indigo,Safari IE et Edge,6.8,#369,IE Firefox,6.8,#FF8C00,Firefox Opera,2.4,red,Opera {/up chart}

    Les options

    Pour faciliter l'utilisation de cette action, UP gère les options usuelles. En fonction du type de graphique, certaines ne sont pas disponibles.


    Option UP area bar bubble column combo line pie scatter stepped Commentaires
    chart type de graphique. Idem à l'option principale. Utiliser pour créer des jeux d'options
    separator par défaut, le séparateur de colonnes des données est la virgule
    vertical modifie l'orientation du graphique
    area left, top, width, height pour la mise en forme du graphique
    maximized racourci pour afficher le graphique en utilisant l'espace au maximum
    colors * * * liste des couleurs pour les séries (séparateur virgule). * il faut plusieurs séries de données pour utiliser cette option.
    title texte du titre
    title-position position du titre : in, out, none (defaut)
    title-style color: 'blue', fontsize: '14px', bold:true (attention à la syntaxe)
    legend-position position des légendes : in, out, none (defaut)
    legend-style color: 'blue', fontSize:14, bold:true, italic:true (attention à la syntaxe et case)
    bar-width * largeur des barres en %
    3D affiche le graphique en relief
    donut part du trou central. ex: 0.5 ou 50 pour la moitié
    isstacked 0, true (absolute) ou relative
    options les autres options proposées par google.chart. Remplacer les {} par []
    height Permets de définir une hauteur minimale pour le graphique. Un bon moyen d'occuper la place avant son affichage

    et bien sûr : id, class, style et css-head

    Les types de graphiques

     

    Area

    Ce type qui ressemble beaucoup à Line, peut être empilé (isstacked).

    Lien vers documentation Google Charts

    {up chart=Area
    | area=5,10,95,80
    | legend-position=bottom
    | title=Navigateurs}
    Navigateur,Chrome,Safari,IE et Edge,Firefox,Opera
    2007,0,2.4,67.8,25,1.8
    2008,0,2.7,63,29.4,2
    ...
    2018,57.4,14.9,7.2,6.6,3.5
    2019,57.4,13.5,6.8,6.8,2.4
    {/up chart}

    Bar

    L'occupation en largeur des barres d'une série peut être définie avec l'option bar-width.

    Pour afficher un texte dans les barres, il faut ajouter une colonne ##label##

    Lien vers documentation Google Charts

    {up chart=Bar
    | title=Evolution du nombre d'actions de UP
    | area=8,10,90,80
    | bar-width=75%
    }
    Version,Actions,##label##
    v1,33,1
    v1.1,39,1.1
    ...
    v1.7,76,1.7
    {/up chart}

    Bubble

    Un graphique à bulles est utilisé pour visualiser un ensemble de données avec deux à quatre dimensions.
    Les deux premières dimensions sont visualisées sous forme de coordonnées, la troisième sous forme de couleur et la quatrième sous forme de taille.

    L'ajout des légendes pour les axes vertical et horizontal est fait à l'aide d'options

    Lien vers documentation Google Charts

    {up chart=Bubble
    | area=8,15,90,75
    | title=Corrélation entre l'espérance de vie et le taux de fécondité
    | legend-position=in | options=hAxis: [title: 'Espérance de vie'],vAxis:[title: 'Taux de fertilité'], } ID, Espérance de vie, Taux de fertilité, Région, Population CAN, 80.66, 1.67, 'Amérique du nord', 33739900 ... USA, 78.09, 2.05, 'Amérique du nord', 307007000 {/up chart}

    Column

    L'occupation en hauteur des barres d'une série peut être définie avec l'option bar-width.

    Pour afficher un texte dans les barres, il faut ajouter une colonne ##label##. Notez que si le texte ne tient pas dans la colonne, il est affiché à coté.
    Pour attribuer une couleur spécifique à chaque colonne, il faut le faire en ajoutant une colonne ##color##

    Lien vers documentation Google Charts

    {up chart=Column
    | title=Evolution du nombre d'actions de UP
    | area=8,10,90,80
    | bar-width=75%
    }
    Version,Actions,##color##, ##label##
    v1,   33,  orange, 1
    v1.1, 39,  green,  1.1
    ...
    v1.7, 76,  red,    Version 1.7
    {/up chart}

    Combo

    Un graphique qui vous permet de rendre chaque série avec un type différent parmi la liste suivante: line, area, bars, stepped area.

    Pour affecter un type de marqueur par défaut pour les séries, spécifiez la propriété seriesType.

    Utilisez la propriété series pour spécifier les propriétés de chaque série individuellement.

    Lien vers documentation Google Charts

    {up chart=Combo
    | title=Combo - Navigateurs
    | bar-width=95%
    | legend-position=in
    | area=10,10,90,90
    | options=seriesType: 'bars',series: [5: [type: 'line']]
    }
    Navigateur,Chrome,Safari,IE et Edge,Firefox,Opera,Moyenne
    2007,0,2.4,67.8,25,1.8,19.4
    2008,0,2.7,63,29.4,2,19.42
    ...
    2019,57.4,13.5,6.8,6.8,2.4,17.38
    {/up chart}

    Line

    Par défaut, les légendes sont à droite. Pour donner plus de place au graphique, legend-position les déplace en haut

    L'option height donne plus de place en hauteur au graphique

    Lien vers documentation Google Charts

    {up chart=Line
    |height=300px
    | title=Navigateurs
    | legend-position=top
    | area=5,15,95,75
    }
    Navigateur,Chrome,Safari,IE et Edge,Firefox,Opera
    2007,0,2.4,67.8,25,1.8
    2008,0,2.7,63,29.4,2
    ...
    2018,57.4,14.9,7.2,6.6,3.5
    2019,57.4,13.5,6.8,6.8,2.4
    {/up chart}

    Pie

    Avec height et area, on donne de l'espace au graphique.

    Les autres options ne devraient pas vous poser de problème. Une nouveauté pour Options avec une règle pour afficher le texte du tooltip en rouge.

    Lien vers documentation Google Charts

    {up chart=Pie
    | height=300
    | area=0,15,100,80
    | colors=green,skyblue,#069,darkorange,red
    | title=Navigateurs Internet 2019
    | title-style=fontSize:18,bold:true,
    | legend-position=top
    | legend-style=color: 'blue', fontsize: '14px', bold:true
    | options=pieStartAngle: 135,slices: [4:[offset: 0.2],],tooltip:[textStyle: [color: '#FF0000']],
    }
    Navigateur,2019
    Chrome,57.4
    Safari,13.5
    IE et Edge,6.8
    Firefox,6.8
    Opera,2.4
    {/up chart}

    Scatter

    Le diagramme de dispersion ou de corrélation met en évidence la relation entre 2 valeurs.

    Lien vers documentation Google Charts

    {up chart=Scatter
    | title=Scatter - Courbe de croissance
    | legend-position=none
    | options=hAxis: [title: 'Age'],vAxis: [title: 'Poids'],
    }
    Age, Poids
    .25, 5.5
    .50, 6.5
    .75, 8
    1, 10
    2,13
    3,14
    4,16
    7,20
    {/up chart}

    SteppedArea


    Un graphique à zones étagées.

    Il est ici en version maximized et empilement relatif

    Lien vers documentation Google Charts

    {up chart=SteppedArea
    | title=Navigateurs
    | isstacked=relative 
    | maximized}
    Navigateur,        Chrome,    Safari,    IE et Edge,    Firefox,    Opera
    2007,              0,         2.4,       67.8,          25,         1.8
    2011,              17.4,      6.6,       39.2,          29.4,       2.3
    2015,              44.7,      16.2,      15.6,          14.3,       3.3
    2019,              57.4,      13.5,      6.8,           6.8,        2.4
    {/up chart}

    Prefset

    Comme la majorité des actions UP, il est possible de créer des jeux d'options dans votre fichier custom.prefs.ini

    Le fichier prefs.ini

    [donut]
    typeChart="pie"
    donut="30"
    area="2,15,98,85"
    options="pieStartAngle:30"
    Le shortcode

    {up chart=donut}
    Navigateur,2019
    Chrome,57.4
    Safari,13.5
    IE et Edge,6.8
    Firefox,6.8
    Opera,2.4
    {/up chart}
    
    Le résultat