---
title: 06 – Ajouter les composants au Tableau de Bord
description: "## Objectif de cette étape Créer le premier tableau de bord du projet en ajoutant les composants qui permettront de visualiser les données préparées dans les étapes précédentes. À l'issue de cette étape, le tableau de bord affichera : -…"
url: "https://wiki.biboard.fr/wiki/06-ajouter-les-composants-au-tableau-de-bord/"
updated: "2026-08-26"
category: "Parcours d'apprentissage / Découverte"
---

# 06 – Ajouter les composants au Tableau de Bord

## Objectif de cette étape

Créer le premier tableau de bord du projet en ajoutant les composants qui permettront de visualiser les données préparées dans les étapes précédentes.

À l'issue de cette étape, le tableau de bord affichera :

- le chiffre d'affaires global ;
- son évolution mensuelle ;
- le chiffre d'affaires par catégorie ;
- le classement des principaux clients ;
- la répartition géographique des ventes.

---

## Ce que vous allez réaliser

Dans cette étape, vous allez :

- créer un nouveau Tableau de Bord ;
- ajouter les cinq composants du projet ;
- associer chaque composant à sa Datasource ;
- organiser les composants pour obtenir une première version du tableau de bord.

Le résultat obtenu sera ensuite enrichi lors de l'étape consacrée aux interactions.

---

## Contexte métier

Les données nécessaires sont désormais disponibles.
Nous allons maintenant les transformer en visualisations afin de permettre au responsable commercial d'analyser rapidement l'activité de l'entreprise.
Chaque composant répond à une question métier précise.

| Question métier | Composant |
| --- | --- |
| Quel est le chiffre d'affaires global ? | KPI |
| Comment évoluent les ventes ? | Courbe |
| Quelles catégories génèrent le plus de chiffre d'affaires ? | Histogramme |
| Quels sont les principaux clients ? | Tableau |
| Dans quels pays les ventes sont réalisées ? | Carte |

---

## Résultat attendu

À la fin de cette étape, le tableau de bord **DECOUVERTE_ANALYSE_COMMERCIALE** doit contenir les cinq composants suivants :

| Composant | Datasource |
| --- | --- |
| KPI | DECOUVERTE_CA_GLOBAL |
| Courbe | DECOUVERTE_EVOLUTION_CA |
| Histogramme | DECOUVERTE_CA_CATEGORIE |
| Tableau | DECOUVERTE_TOP_CLIENTS |
| Carte | DECOUVERTE_CA_PAYS |

---

## Étape 1 — Créer le Tableau de Bord

Créer un nouveau Tableau de Bord nommé :

```
DECOUVERTE_ANALYSE_COMMERCIALE
```

Une fois le tableau créé, ouvrir son espace de conception.

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-01-1024x617.png)

---

## Étape 1 bis — Ajouter un titre

Ajouter un **Titre**.
Configurer les propriétés suivantes :

| Propriété | Valeur |
| --- | --- |
| Type de composant | Formulaire / Libellé sans Datasource |
| Texte | Activité de l'entreprise |
| Apparence/Largeur de l'objet | 1000 |

## Étape 2 — Ajouter le KPI

Ajouter un composant **KPI** ainsi qu'un **Titre**.
Configurer les propriétés suivantes :

| Propriété | Valeur |
| --- | --- |
| Type de composant | Formulaire / Libellé sans Datasource |
| Texte | Chiffre d'affaires |
| Apparence/Largeur de l'objet | 150 |

| Propriété | Valeur |
| --- | --- |
| Type de composant | Formulaire / Libellé avec Datasource |
| Datasource | DECOUVERTE_CA_GLOBAL |
| Champ | CA_GLOBAL |
| Apparence/Largeur de l'objet | 150 |

Le composant affiche automatiquement le montant total des ventes.

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-02-1024x612.png)

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-03-1024x617.png)

---

## Étape 3 — Ajouter la courbe d'évolution

Ajouter un composant **Courbe**.
Configurer les propriétés suivantes :

| Propriété | Valeur |
| --- | --- |
| Type de composant | Graphiques / lignes avec Datasource |
| Datasource | DECOUVERTE_EVOLUTION_CA |
| Axe des catégories | MOIS_ANNEE |
| Valeur | CA_MENSUEL |
| Trier par | MOIS_ANNEE |
| Titre | Évolution mensuelle / année |
| Apparence/Hauteur de l'objet | 500 |
| Apparence/Largeur de l'objet | 500 |

La courbe permet de visualiser l'évolution du chiffre d'affaires dans le temps.

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-06-1024x612.png)

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-04-1024x617.png)

---

## Étape 4 — Ajouter l'histogramme

Ajouter un composant **Histogramme**.
Configurer les propriétés suivantes :

| Propriété | Valeur |
| --- | --- |
| Type de composant | Graphiques /Histogramme |
| Datasource | DECOUVERTE_CA_CATEGORIE |
| Catégorie | CATEGORIE |
| Valeur | CA_CATEGORIE |
| Trier par | CATEGORIE |
| Titre | Chiffre d'affaires par catégorie |
| Apparence/Hauteur de l'objet | 500 |
| Apparence/Largeur de l'objet | 500 |

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-05-1024x640.png)

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-07-1024x617.png)

---

## Étape 5 — Ajouter le tableau

Ajouter un composant **Tableau**.
Configurer les propriétés suivantes :

| Propriété | Valeur |
| --- | --- |
| Type de composant | Tableaux / Tableau |
| Datasource | DECOUVERTE_TOP_CLIENTS |
| Colonnes | CLIENT, CA_CLIENT |
| Tri | CA_CLIENT décroissant |
| Apparence/Hauteur de l'objet | 500 |
| Apparence/Largeur de l'objet | 500 |

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-08-1024x617.png)

---

# Étape 6 — Ajouter le compartiments

Ajouter un composant **Compartiments**.
Configurer les propriétés suivantes :

| Propriété | Valeur |
| --- | --- |
| Type de composant | Graphiques / Compartiments |
| Datasource | DECOUVERTE_CA_PAYS |
| Zone géographique | PAYS |
| Valeur | CA_PAYS |
| Titre | Répartition géographique |
| Apparence/Largeur de l'objet | 500 |

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-09-1024x617.png)

---

## Étape 7 — Organiser les composants

Positionner les composants afin d'obtenir un tableau de bord lisible.
Une disposition possible est la suivante :

```
+------------------------------------------------------+
|                        Titre                         ]
+------------------------------------------------------+
| Titre | KPI Chiffre d'affaires                       |
+--------------------------+---------------------------+
| Courbe évolution         | Histogramme catégories    |
+--------------------------+---------------------------+
| Top clients              | Répartition pays          |
+--------------------------+---------------------------+
```

L'objectif est simplement d'obtenir une présentation claire. La mise en forme pourra être améliorée ultérieurement.

![](https://wiki.biboard.fr/wp-content/uploads/2026/07/CP-C0-TdB-10-1024x617.png)

---

## Vérification

Avant de poursuivre, vérifiez que :

☐ Le Tableau de Bord **DECOUVERTE_ANALYSE_COMMERCIALE** est créé.

☐ Les cinq composants sont présents.

☐ Chaque composant utilise la bonne Datasource.

☐ Les données affichées sont cohérentes.

☐ Le tableau de bord est lisible.

---

## Erreurs fréquentes

### Utiliser une mauvaise Datasource

Chaque composant doit être associé à la Datasource correspondant à son analyse métier.
Par exemple, le composant **KPI** doit utiliser **DECOUVERTE_CA_GLOBAL** et non **DECOUVERTE_TOP_CLIENTS**.

---

### Chercher à personnaliser immédiatement les composants

Les composants proposent de nombreuses options de personnalisation (couleurs, formats, styles, animations...).
Dans ce parcours, l'objectif est de construire un tableau de bord fonctionnel.
Les possibilités de personnalisation seront abordées dans le **Parcours 3 — Personnalisation**.

---

## À retenir

- Un composant est toujours alimenté par une Datasource.
- Chaque composant répond à un besoin métier précis.
- Le Tableau de Bord assemble les différentes visualisations pour offrir une vue d'ensemble.

---

## Prochaine étape

**06 — Rendre le Tableau de Bord interactif**

Nous ajouterons des filtres afin que les différents composants réagissent aux sélections de l'utilisateur.

---