Graphiques et visualisation

Sur Kis, vous pouvez transformer toutes vos données en graphiques clairs et lisibles, pour comprendre toutes vos informations clés en un coup d'oeil.

1. Camembert

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.

Au préalable, on prépare une table de données ("membres-organisation") dans laquelle se trouve le nombre de dirigeants, adhérents et bénévoles à jour.

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 (ici, on l'appelle Répartition) que l'on va relier à notre table de données "membres-organisation".

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.

Vous pouvez choisir la couleur de chaque part afin de personnaliser votre graphique selon vos envies.

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. De cette manière, le camembert évoluera dès que les données de la table seront mises à jour.

Pour cet 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 table de données.

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

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 table de données.

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

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.

3. Barres radiales

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 table de données (ici, "dirigeants", "adherents" et "benevoles").

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.

4. Courbes

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.

Avant de commencer, on prépare une table de données ("evolution-membres") dans laquelle on retrouve l'évolution du nombre d'adhérents et de bénévoles au cours des 12 derniers mois.

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 (Évolution) que l'on relie notre table de données "evolution-membres".

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. Dans notre exemple, les mois de l'année, présent dans notre table de données. On sélectionne donc notre source de données Évolution, et la bonne colonne dans la table, "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 table de données, ici, "adherents" et "benevoles".

Rendons-nous maintenant sur Kis, côté utilisateur. On constate que les deux courbes sont présentes et respectent les valeurs de notre table de données. Et en abscisse, les mois de l'année sont bien présents.

5. Jauge

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.

Avant de commencer, on prépare une table de données ("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.

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 que l'on appelle Collecte de dons et que l'on relie à notre table de données "objectifs-dons".

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

Vous pouvez intégrer des données 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 table de données dans laquelle se trouve le titre que vous souhaitez utiliser.

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

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.

Rendons-nous sur l'application, côté utilisateur. On constate que la jauge prend bien en compte les données de notre table.

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 table seront mises à jour.

6. Barre de progression

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

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.

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.