DGE Chart - Exemples#
Les exemples présentés ci-dessous vous permettent de mieux appréhender l'usage du composant DGE Chart.
Parfois, ces exemples sont simplistes ou de peut de valeur scientifique. Ils sont là uniquement pour vous aider à comprendre le fonctionnement du composant DGE Chart. N'hésitez pas à partager vos exemples et à nous contacter pour compléter cette page.
Exemple 1: base#
A partir d'un jeu de données simple, on affiche un graphique en barres avec en abscisse (x) les différents objets du tableau et en ordonnées (y) le prix de chaque objet.
Cet exemple monter aussi comment ajouter un titre, les attributions (mentions légales) et le nom de la série.
Exemple 1
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 5 6 7 |
|
Exemple 2: calcul sur les ordonnées (y)#
Sur la base de l'exemple 1, on représente ici en ordonnées la densité par ville (densite = population / superficie).
Exemple 2
1 2 3 4 5 6 7 8 9 10 |
|
Seules les données utiles du fichier sont représentées ici.
1 2 3 4 5 6 7 |
|
Exemple 3: tri sur les abscisses (x)#
Sur la base de l'exemple 2, on ajoute cette fois un tri sur les abscisses via la propriété orderby=""
.
Exemple 3
1 2 3 4 5 6 7 8 9 10 11 |
|
Seules les données utiles du fichier sont représentées ici.
1 2 3 4 5 6 7 |
|
Exemple 4: tri sur les ordonnées (y)#
Sur la base de l'exemple 2, on ajoute cette fois un tri (propriété orderby=""
) sur la colonne des ordonnées (y).
La colonne y étant caculé on doit utiliser un alias ("densite") afin de nommer la colonne résultante.
Exemple 4
1 2 3 4 5 6 7 8 9 10 11 |
|
Seules les données utiles du fichier sont représentées ici.
1 2 3 4 5 6 7 |
|
Exemple 5: ajout d'un filtre (select)#
Sur la base de l'exemple 2, on ajoute cette fois, en plus du tri sur les ordonnées, une liste de choix (propriété filter=""
) pour filter par district.
La propriété filter=""
utilise 2 valeurs séparées par "|":
- Le nom du select
- la colonne utilisée pour filtrer les valeurs
Exemple 5
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Seules les données utiles du fichier sont représentées ici.
1 2 3 4 5 6 7 |
|
Exemple 6: ajout d'un champ de recherche#
Sur la base de l'exemple 2, on ajoute cette fois, en plus du tri sur les ordonnées, un champ de recherche (propriété search=""
) de choix pour filter par district ou ville.
Exemple 6
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Seules les données utiles du fichier sont représentées ici.
1 2 3 4 5 6 7 |
|
Exemple 7: plusieurs séries de données#
Sur la base de l'exemple 5, on ajoute ici deux séries de données: le nombre d'habitants et la superficie.
A noter qu'il faut aussi adapter les propriétés séries=""
et chart=""
.
Exemple 7
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Seules les données utiles du fichier sont représentées ici.
1 2 3 4 5 6 7 |
|
Exemple 8: jointures entre table#
Dans cet exemple, on utilise une jointure entre plusieurs jeux de données pour calculer la valeur représentée en ordonnée (y).
A noter: l'ensemble des jeux de données (propriété datasets=""
) doivent provenir de la même source (propriété url=""
)
Evolution: pouvoir utiliser des données de sources différentes (url="https://...;url:https://..."
). Comment traiter le cas si 2 URL pour 3 jeux de données ?
Exemple 8
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Seules les données utiles du fichier sont représentées ici.
comandes.csv
1 2 3 4 5 6 7 8 9 10 11 |
|
objet.csv
1 2 3 4 5 |
|
contacts.csv
1 2 3 4 |
|
Exemple 9: regroupement (groupby)#
Dans cet exemple, on utilise la propriété de regroupement groupby=""
pour calculer la somme des valeurs de la colonne val par type d'objet.
Exemple 9
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Seules les données utiles du fichier sont représentées ici.
test2.csv
1 2 3 4 5 6 |
|
Exemple 10: filtre avec regroupement#
Sur la base de l'exemple 9, on ajoute ici un filtre sur le champ "form".
Exemple 10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Seules les données utiles du fichier sont représentées ici.
test2.csv
1 2 3 4 5 6 |
|
Exemple 11: graphique de type jauge avec étiquettes et texte central#
On s'intéresse ici à la présentation d'un graphique de type "jauge" avec étiquettes et texte central de mise en avant.
Exemple 11
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Seules les données utiles du fichier sont représentées ici.
gauge.csv
1 2 3 |
|