# Graphiques et visualisation

## 1. Camembert

{% embed url="<https://youtu.be/qJcMumDt1xY>" %}

Le camembert, c'est un **graphique en forme de disque divisé en parts**. Chacune de ces parts représente **une proportion ou un pourcentage** d'une valeur totale. Il permet de visualiser rapidement comment un ensemble se décompose en plusieurs catégories.

Pour rendre notre explication plus claire, on va prendre **l'exemple d'une page dédiée aux membres d'une organisation** afin de voir comment ils se répartissent selon leurs rôles.

{% hint style="warning" %}
Au préalable, on [**prépare une liste**](https://doc.kis.work/documentation/guide-de-demarrage/importez-vos-donnees-dans-kis/creez-et-peuplez-une-liste) ("**evolution-membres**") dans laquelle se trouve le nombre de dirigeants, adhérents et bénévoles à jour.
{% endhint %}

**1 -** Dans notre page, on ajoute un **container vide**. Dans **Composants**, on vient glisser-déposer le composant **Camembert**.

**2 -** On nomme notre camembert (ici, **Répartition des membres**) et, si besoin, on lui donne un sous-titre.

**3 -** Dans **Données**, on [**crée une nouvelle source**](https://doc.kis.work/documentation/guide-de-demarrage/source-de-donnees) (ici, on l'appelle **Répartition**) que l'on va relier à notre liste "**evolution-membres**".

**4 -** On retourne éditer le camembert afin d'ajouter des valeurs au graphique. On commence par **ajouter le nombre de champs nécessaires** (3, dans notre exemple) que l'on nomme **Dirigeants**, **Adhérents** et **Bénévoles**.

{% hint style="success" %}
Vous pouvez **choisir la couleur de chaque part** afin de personnaliser votre graphique selon vos envies.
{% endhint %}

**5 -** Puis **on renseigne les valeurs de chaque champ**. Pour ce faire, on clique sur l'icône de **Sélection** (les deux petits rectangles à côté de chaque champ). Deux options s'offrent à nous :

* Entrer manuellement la valeur de chaque part. Mais il faudra aller les modifier à la main si elles changent.
* Intégrer des [**données dynamiques**](https://doc.kis.work/documentation/guide-de-demarrage/donnees-dynamiques). De cette manière, le camembert évoluera dès que les données de la liste seront mises à jour.

Pour ce deuxième cas de figure, il suffit de **renseigner l'ID des données dynamiques** (ici, notre source de données **Répartition**) puis d'associer chaque valeur à la **bonne colonne de la liste**.

On se rend côté utilisateur et on voit que **les données dynamiques ont bien été prises en compte**. Et on a la certitude de toujours avoir un camembert avec les valeurs à jour.

## 2. Donut

{% embed url="<https://youtu.be/TaGOTdR8LJk>" %}

Maintenant que vous savez créer un camembert, vous n'aurez aucun mal à intégrer un donut dans votre page. **Les deux composants fonctionnent de la même manière**. Seul l'aspect change, en reprenant la forme du célèbre beignet au trou central.

**Reprenons le même exemple** avec la répartition des membres dans notre organisation :

**1 -** On ajoute un **container vide** dans lequel on vient glisser-déposer le **composant Donut**.

**2 -** On donne **un titre et un sous-titre** à notre graphique.

**3 -** On ajoute **le nombre de champs nécessaires** au graphique et on les nomme.

**4 -** On **renseigne les valeurs manuellement** ou on **intègre des données dynamiques**, en prenant soin de bien associer chaque champ avec la colonne correspondante dans la liste.

À la différence du camembert, le donut propose la **somme totale des parts** dans son rond central.

{% hint style="success" %}
Pour connaître précisément toutes les étapes de création du donut, **référez-vous à celles détaillées dans le composant Camembert** en haut de page.
{% endhint %}

## 3. Barres radiales

{% embed url="<https://youtu.be/SqyA6MBxzgs>" %}

Les barres radiales se présentent sous la forme de **barres de données, en cercle**, qui partent du centre et s’étendent vers l’extérieur. Chaque barre représente une donnée, et leur longueur dans le graphique indique leur importance.

**Bonne nouvelle :** maintenant que vous savez créer des camemberts et des donuts, vous n'aurez aucun mal avec les barres radiales puisque **les étapes sont similaires**.

Maintenant que vous le maîtrisez, on va garder notre exemple de répartition des membres d'une organisation en fonction de leurs rôles. Le principe reste le même.

**1 -** On ajoute un **container vide** dans lequel on vient glisser-déposer le **composant Barres radiales**.

**2 -** On donne **un titre et un sous-titre** à notre graphique.

**3 -** On ajoute **le nombre de champs nécessaires** et on les nomme. Ici, ce sera donc **Dirigeants**, **Adhérents** et **Bénévoles**.

**4 -** On **saisit les valeurs manuellement** ou on **ajoute des données dynamiques**, en sélectionnant la bonne source (**Répartition**) puis la colonne correspondante dans la liste (ici, "**dirigeants**", "**adherents**" et "**benevoles**").

{% hint style="success" %}
Pour connaître précisément toutes les étapes de création des barres radiales, **référez-vous à celles détaillées dans le composant Camembert** en haut de page.
{% endhint %}

## 4. Courbes

{% embed url="<https://youtu.be/pXj3uk3GDhk>" %}

Sur Kis, en utilisant une courbe, **vous visualisez très simplement l'évolution des valeurs de votre choix** : recettes, chiffre d'affaires, nombre de salariés ou de membres, etc.

Prenons l'exemple d'une association qui souhaite connaître **l'évolution de ses bénévoles et adhérents payants sur l'année**.

{% hint style="warning" %}
Avant de commencer, on [**prépare une liste**](https://doc.kis.work/documentation/guide-de-demarrage/importez-vos-donnees-dans-kis/creez-et-peuplez-une-liste) ("**evolution-adherents-benevoles**") dans laquelle on retrouve l'évolution du nombre d'adhérents et de bénévoles au cours des 12 derniers mois.
{% endhint %}

1 - On commence par **ajouter un container vide** dans notre page. Puis, dans **Composants**, on cherche l'élément **Courbes** que l'on fait glisser-déposer dans le container.

2 - Dans **Données**, on [**crée une nouvelle source**](https://doc.kis.work/documentation/guide-de-demarrage/source-de-donnees) (**Évolution**) que l'on relie notre liste "**evolution-adherents-benevoles**".

3 - De retour dans la page, on donne un titre à la courbe (**Évolution des membres**) et un sous-titre (**Nombre d'adhérents et bénévoles sur 2025**).

4 - On remplit le champ **Étiquettes de graphique**. C'est le nom qui apparaîtra en abscisse sous chaque valeur.

On peut peut **renseigner un nom manuellement** : ce sera donc le même sous chaque valeur.

Ou on **intègre des** [**données dynamiques**](https://doc.kis.work/documentation/guide-de-demarrage/donnees-dynamiques). Dans notre exemple, les mois de l'année, présent dans notre liste. On sélectionne donc notre source de données **Évolution**, et la bonne colonne dans la liste, "**mois**". Les 12 mois apparaîtront donc en abscisses dans notre courbe finale.

**5 -** On renseigne **les valeurs du graphique** en ajoutant autant de champs que nécessaires. Ici, seulement deux seront nécessaires : **Adhérents** et **Bénévoles**.

Il est également possible de **choisir les couleurs** des futures courbes afin de personnaliser votre graphique.

**6 -** Enfin, on intègre les données dynamiques dans chaque champ, en sélectionnant la bonne source de données (**Évolution**) puis la colonne correspondante dans la liste, ici, "**adherents**" et "**benevoles**".

Côté utilisateur, on constate que les deux courbes sont présentes et respectent les valeurs de notre liste. Et en abscisse, les mois de l'année sont bien présents.

## 5. Jauge

{% embed url="<https://youtu.be/KCIZLRx5hW4>" %}

La jauge permet de mettre en lumière un montant, une valeur ou un pourcentage rendu dynamique grâce à un calcul mis en place avec notre data.

Pour illustrer l'intégration d'une jauge sur Kis, on va prendre **l'exemple d'une collecte de dons organisée par une association**, avec un objectif finale de 10.000€. La jauge va ainsi nous permettre de constater l'évolution de la collecte par rapport à notre objectif.

{% hint style="warning" %}
Avant de commencer, on [**prépare une liste**](https://doc.kis.work/documentation/guide-de-demarrage/importez-vos-donnees-dans-kis/creez-et-peuplez-une-liste) ("**objectifs-dons**") dans laquelle se trouve l'objectif final de la collecte et la somme récupérée à l'instant T, et mise à jour en temps réel.
{% endhint %}

**1 -** Dans notre page, on ajoute un **nouveau container**. Puis, dans **Composants**, on fait glisser-déposer l'élément **Jauge** dans le container vide.

**2 -** Dans **Données**, on [**crée une nouvelle source**](https://doc.kis.work/documentation/guide-de-demarrage/source-de-donnees) que l'on appelle **Collecte de dons** et que l'on relie à notre liste "**objectifs-dons**".

**3 -** On édite la jauge en lui donnant un titre, **Collecte de dons**, et un sous-titre, **Objectif : 10.000€**.

{% hint style="success" %}
Vous pouvez intégrer des [**données dynamiques**](https://doc.kis.work/documentation/guide-de-demarrage/donnees-dynamiques) pour remplir le titre et le sous-titre. En appuyant sur le bouton de Sélection (les deux rectangles), choisissez la bonnes source de données et la colonne de votre liste dans laquelle se trouve le titre que vous souhaitez utiliser.
{% endhint %}

**4 -** On remplit ensuite les champs suivants. Si on le souhaite, on peut saisir manuellement **un texte au centre et en bas de la jauge**, ainsi qu'une **devise**.

Dans notre cas, on laisse **€ comme devise**. Et en guise de texte central, on utilise **les données de notre liste**. On sélectionne notre source de données et la colonne de notre choix. Ici, ce sera "**dons**", afin d'afficher la somme collectée constamment mise à jour.

**5 -** Enfin, on passe aux **valeurs de la jauge**. Vous pouvez saisir un **libellé** qui apparaîtra sous le pourcentage en dessous de la jauge, avec d'apporter une précision. Comme pour les autres textes, vous pouvez également **lier une donnée** de votre choix.

Et on renseigne **Valeur 1** (les dons collectés jusqu'à présent) et **Valeur 2** (notre objectif final). On clique sur le bouton de **Sélection** (les deux triangles).

Et pour chaque champ, on sélectionne la source de donnée (**Collecte de dons**) puis on sélectionne les colonnes correspondantes. Ici, "**dons**" puis "**objectifs**".

{% hint style="success" %}
Si vous le souhaitez, vous pouvez saisir des valeurs à la main. Mais, contrairement aux données dynamiques, elles resteront statiques et ne seront pas mises à jour en temps réel.
{% endhint %}

Côté utilisateur, on constate que **la jauge prend bien en compte les données de notre liste**.

Pour le moment, l'association a donc récolté 6.750€ sur les 10.000€ espérés, ce qui correspond à 67,5% de l'objectif final. **Et le graphique évoluera dans le temps**, quand les données de la liste seront mises à jour.

## 6. Barre de progression

{% embed url="<https://youtu.be/J9bPKUjv5CM>" %}

Comme son nom l'indique, ce composant vous permet de **visualiser la progression d'un projet en fonction d'un objectif**.

Et maintenant que vous savez comment intégrer une **jauge** dans votre page, la **barre de progression** va être un véritable jeu d'enfant pour vous puisque **le fonctionnement reste le même**.

Conservons notre exemple de collecte de dons avec un objectif de 10.000€. Comme pour la jauge :

**1 -** Dans la page, on ajoute un **container vide** puis on vient glisser-déposer la **barre de progression** à l'intérieur.

**2 -** On donne **un titre et un sous-titre** à notre élément, soit en entrant du texte manuellement, soit en liant des données de notre liste à ces champs.

**3 -** On remplit les champs **Valeur 1** et **Valeur 2**, respectivement avec les dons collectés et la somme de l'objectif final.

Là encore, vous pouvez saisir des valeurs statiques. Ou lier des données dynamiques pour chaque champ afin que votre barre de progression soit constamment à jour.

{% hint style="success" %}
Pour connaître précisément toutes les étapes de création de la barre de progression, **référez-vous à celles détaillées dans le composant Jauge** juste au-dessus.
{% endhint %}

Dans l'application côté utilisateur, on constate que **toutes nos données ont été prises en compte** et que la barre de progression affiche bien 67,5% de l'objectif.