Cette action permet de mettre en oeuvre facilement les graphiques les plus utilisés proposés par GoogleChart
{up chart=type_chart}... data ...{/up chart}- chart: type de chart : area, bar,bubble,column,combo,line,pie,scatter,SteppedArea
- separator: séparateur des valeurs dans la liste
mise en forme du graph
- area: valeur en % dans l'ordre : left, top, width, height. EX: 10,25,90,75
- maximized: affichage remplit le bloc
- height (h,hauteur): min-height bloc parent
- colors: liste des couleurs
titre du graph
- title (titre): titre du graphique
- title-position: in, out, none (defaut)
- title-style: color: 'blue', fontsize: '14px', bold:true (attention à la syntaxe)
légende du graph
- legend-position: in, none (defaut), top, bottom
- legend-style: ex: color:'blue',fontSize:14,bold:true
Paramètres spécifiques selon le type de graph
- vertical: horizontal par défaut ou vertical. Tous sauf bar et bubble
- bar-width: largeur des barres en %. Area, bubble, pie, scatter & stepped
- 3D: camembert en relief. Tous sauf pie
- donut: part du trou central. ex: 0.5 pour la moitié. uniquement pour pie
- isstacked: 0, true (absolute) ou relative. Tous sauf bubble, line, pie & scatter
- options: les autres options proposées par google.chart (remplacer {} par [] dans la chaine JSON )
style et options secondaires
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
Le principe
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}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}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
{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
Pour afficher un texte dans les barres, il faut ajouter une colonne ##label##
{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
L'ajout des légendes pour les axes vertical et horizontal est fait à l'aide d'options
{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##
{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
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.
{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
L'option height donne plus de place en hauteur au graphique
{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
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.
{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
{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
Il est ici en version maximized et empilement relatif
{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
[donut]
typeChart="pie"
donut="30"
area="2,15,98,85"
options="pieStartAngle:30"{up chart=donut}
Navigateur,2019
Chrome,57.4
Safari,13.5
IE et Edge,6.8
Firefox,6.8
Opera,2.4
{/up chart}
upactionslist (1) tabslide (1) toc (1) flexauto (1) chart (23) flexbox (14) table-par-lignes (1) csv2table (1) jcontent-info (1)