--- title: 04 – Moderniser les graphiques description: "## Objectif du chapitre Dans le chapitre précédent, nous avons modernisé les KPI afin de leur donner une véritable identité visuelle. Nous allons maintenant appliquer la même démarche aux graphiques du tableau de bord. L'objectif n'est pas de remplacer les…" url: "https://wiki.biboard.fr/wiki/04-moderniser-les-graphiques/" updated: "2026-08-19" category: "Parcours d'apprentissage / Design" --- # 04 – Moderniser les graphiques ## Objectif du chapitre Dans le chapitre précédent, nous avons modernisé les KPI afin de leur donner une véritable identité visuelle. Nous allons maintenant appliquer la même démarche aux graphiques du tableau de bord. L'objectif n'est pas de remplacer les composants graphiques natifs de BiBOARD par du HTML. Nous allons conserver les composants existants et exploiter leurs possibilités de configuration pour améliorer leur présentation. Nous allons également rendre les graphiques cohérents avec les filtres déjà présents dans le tableau de bord. À l'issue de ce chapitre, les graphiques permettront de : - prendre en compte le **Pays** sélectionné ; - prendre en compte l'**Année** sélectionnée ; - présenter les données avec un rendu plus lisible ; - conserver une cohérence graphique avec les KPI et le bandeau. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_Attendu-Graphiques--1024x542.png) --- ## Adapter les données aux graphiques Les deux graphiques existants présentent actuellement : 1. le chiffre d'affaires par mois ; 2. le chiffre d'affaires par catégorie. Le filtre **Pays** est déjà utilisé. Nous souhaitons maintenant que la liste déroulante **Année** contrôle également les graphiques. Pour cela, les requêtes utilisées par les graphiques doivent recevoir le paramètre `pAnnee`. --- ## Adapter la gestion de l'année Les KPI du chapitre précédent utilisent également le paramètre `pAnnee`. Pour les graphiques, l'année est manipulée sous forme de **texte**. Cette approche permet d'obtenir un comportement homogène entre la liste déroulante et les différents composants du tableau de bord. Le principe est le suivant : ``` Liste déroulante Année │ └── valeur texte │ ▼ pAnnee │ ┌───────┴────────┐ ▼ ▼ KPI Graphiques ``` Dans les requêtes SQL, l'année issue de la date de commande est donc convertie en `varchar(4)` avant d'être comparée au paramètre. --- ## Graphique - Chiffre d'affaires par mois Le premier graphique présente l'évolution du chiffre d'affaires au fil des mois. ### Modifier la requête SQL Le graphique utilise la requête : ``` DESIGN_04_CA_MENSUEL ``` La requête retourne notamment : - le mois ; - l'année ; - l'année sous forme de texte ; - le chiffre d'affaires. ``` SELECT DATEADD( MONTH, DATEDIFF(MONTH, 0, co.DateCommande), 0 ) AS Mois, CAST(YEAR(co.DateCommande) AS Varchar(4)) AS 'Année_char', CAST( SUM( cd.Prix * cd.Quantite * (1 - cd.Remise) ) AS decimal(18, 2) ) AS ChiffreAffaires FROM Demonstration.dbo.Commandes AS co INNER JOIN Demonstration.dbo.Clients AS cl ON cl.CodeClient = co.CodeClient INNER JOIN Demonstration.dbo.Commandes_Details AS cd ON cd.NumCommande = co.NumCommande WHERE co.DateCommande IS NOT NULL AND ( :pPays = '#NULL' OR cl.Pays = :pPays ) AND ( :pAnnee = '#NULL' OR CAST(YEAR(co.DateCommande) AS varchar(4)) = :pAnnee ) GROUP BY YEAR(co.DateCommande), DATEADD( MONTH, DATEDIFF(MONTH, 0, co.DateCommande), 0 ) ORDER BY Mois; ``` Le filtre sur le pays est conservé. Le filtre sur l'année est ajouté en convertissant `YEAR(co.DateCommande)` en texte. --- ## Préparer la Datasource du graphique Le graphique utilise la Datasource : ``` DESIGN_04_CA_MENSUEL ``` Dans cette Datasource, nous allons créer un champ calculé permettant d'afficher le mois sous une forme plus lisible. Créer le champ : ``` Mois_alpha ``` avec les paramètres suivants : | Paramètre | Valeur | | --- | --- | | Format | `MMM` | | Type de champ | Date | | Formule | `Field("Mois")` | Ce champ permet notamment d'afficher les mois sous une forme abrégée : ``` janv. fév. mars avr. ... ``` ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_Datasource-DESIGN_04_CA_MENSUEL-1024x617.png) --- ## Reconnecter le graphique Le composant graphique est maintenant connecté à la Datasource : ``` DESIGN_04_CA_MENSUEL ``` Configurer les axes du graphique : | Paramètre | Champ | | --- | --- | | Abscisse | `Mois_alpha` | | Ordonnée | `ChiffreAffaires` | | Trier | `Mois` | Le champ `Mois_alpha` est utilisé pour l'affichage. Le champ `Mois` est conservé pour effectuer le tri chronologique des mois. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-config-DESIGN_04_CA_MENSUEL-1024x617.png) --- ## Reconnecter les filtres Le changement de Datasource a supprimé les liens précédemment établis avec le composant graphique. Il faut donc les recréer. ### Année ``` YEAR_CHAR → pAnnee ``` ### Pays ``` Pays → pPays ``` Le graphique est maintenant piloté par les mêmes filtres que les KPI. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-lien-DESIGN_04_CA_MENSUEL-1024x617.png) --- ## Positionner le graphique Positionner le graphique aux coordonnées suivantes : | Paramètre | Valeur | | --- | --- | | Position verticale de l’objet sur page | 382 | | Position horizontale de l’objet sur page | 0 | | Hauteur de l’objet | 700 | | Largeur de l’objet | 500 | ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-apparence-DESIGN_04_CA_MENSUEL-1024x617.png) --- ## Personnaliser le graphique Le graphique est maintenant fonctionnel. Nous allons pouvoir travailler uniquement sur son apparence. Pour éviter de surcharger les explications, chaque modification sera présentée séparément à partir de l'écran de configuration correspondant. --- ### Paramètres généraux Les paramètres généraux permettent de définir le comportement global du graphique. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-01-DESIGN_04_CA_MENSUEL-1024x623.png) L'objectif est de conserver un graphique simple, lisible et cohérent avec le reste du tableau de bord. --- ### Titre Le titre permet d'identifier immédiatement l'information présentée. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-02-DESIGN_04_CA_MENSUEL-1024x586.png) Privilégiez un titre court et explicite. Par exemple : **Évolution mensuelle du chiffre d'affaires** --- ### Légende Lorsque le graphique ne présente qu'une seule série, la légende apporte généralement peu d'informations. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-03-DESIGN_04_CA_MENSUEL-1024x633.png) L'objectif est de conserver uniquement les informations utiles à la lecture du graphique. --- ### Catégories - Axe X Les catégories correspondent à l'axe horizontal du graphique. Dans notre cas : ``` Mois_alpha ``` est utilisé pour afficher les mois. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-04-DESIGN_04_CA_MENSUEL-1024x632.png) Nous recherchons avant tout une lecture claire des mois et un espacement adapté aux données. --- ### Valeurs - Axe Y L'axe des valeurs représente le chiffre d'affaires. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-05-DESIGN_04_CA_MENSUEL-1024x764.png) Les réglages doivent permettre de conserver une bonne lisibilité des valeurs sans surcharger le graphique. --- ### Série ChiffreAffaires Les propriétés propres à la série permettent d'affiner le rendu de la courbe. La série utilisée est : ``` ChiffreAffaires ``` ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-06-DESIGN_04_CA_MENSUEL-1024x693.png) C'est notamment ici que les paramètres graphiques spécifiques à la courbe peuvent être ajustés. --- ## Graphique - Chiffre d'affaires par catégorie Le deuxième graphique présente le chiffre d'affaires par catégorie de produits. Il sera lui aussi rendu dépendant des filtres **Pays** et **Année**. --- ## Modifier la requête SQL Le graphique utilise la requête : ``` DESIGN_05_CA_CATEGORIE ``` La requête retourne : - la catégorie ; - l'année ; - l'année sous forme de texte ; - le chiffre d'affaires. ``` SELECT cat.NomCategorie AS Categorie, YEAR(co.DateCommande) AS 'Année', CAST(YEAR(co.DateCommande) AS Varchar(4)) AS 'Année_char', CAST( SUM( cd.Prix * cd.Quantite * (1 - cd.Remise) ) AS decimal(18, 2) ) AS ChiffreAffaires FROM Demonstration.dbo.Commandes AS co INNER JOIN Demonstration.dbo.Clients AS cl ON cl.CodeClient = co.CodeClient INNER JOIN Demonstration.dbo.Commandes_Details AS cd ON cd.NumCommande = co.NumCommande INNER JOIN Demonstration.dbo.Produits AS p ON p.CodeProduit = cd.CodeProduit INNER JOIN Demonstration.dbo.Categories AS cat ON cat.CodeCategorie = p.NumCategorie WHERE co.DateCommande IS NOT NULL AND ( :pPays = '#NULL' OR cl.Pays = :pPays ) AND ( :pAnnee = '#NULL' OR CAST(YEAR(co.DateCommande) AS varchar(4)) = :pAnnee ) GROUP BY YEAR(co.DateCommande), cat.NomCategorie ORDER BY ChiffreAffaires DESC; ``` Le filtre sur le Pays est conservé et le filtre sur l'Année est ajouté selon le même principe que pour le graphique précédent. --- ## Reconnecter la Datasource Le graphique utilise maintenant : ``` DESIGN_05_CA_CATEGORIE ``` Configurer les axes : | Paramètre | Valeur | | --- | --- | | Abscisse | Categorie | | Ordonnée | ChiffreAffaires | | Trier | ChiffreAffaires | Le tri par chiffre d'affaires permet de présenter les catégories de la plus importante à la moins importante. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-config-DESIGN_05_CA_CATEGORIE-1024x617.png) --- ## Reconnecter les filtres Comme pour le premier graphique, le changement de Datasource a supprimé les liens précédemment établis. Il faut les recréer. ### Année ``` YEAR_CHAR → pAnnee ``` ### Pays ``` Pays → pPays ``` Le graphique est maintenant contrôlé par les mêmes filtres que les autres composants du tableau de bord. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-lien-DESIGN_05_CA_CATEGORIE-1024x617.png) --- ## Positionner le graphique Positionner le graphique aux coordonnées suivantes : | Paramètre | Valeur | | --- | --- | | Position verticale de l’objet sur page | 382 | | Position horizontale de l’objet sur page | 500 | | Hauteur de l’objet | 700 | | Largeur de l’objet | 500 | Les deux graphiques sont ainsi positionnés l'un sous l'autre. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-apparence-DESIGN_05_CA_CATEGORIE-1024x617.png) --- ## Personnaliser le graphique Comme pour le graphique précédent, nous allons maintenant travailler sur les propriétés graphiques natives du composant. L'objectif est de conserver une cohérence visuelle entre les deux graphiques. --- ### Paramètres généraux ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-01-DESIGN_05_CA_CATEGORIE-1024x636.png) --- ### Titre Le titre doit permettre d'identifier immédiatement le contenu du graphique. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-02-DESIGN_05_CA_CATEGORIE-1024x599.png) Par exemple : **Chiffre d'affaires par catégorie** --- ### Légende Le graphique ne présentant qu'une seule série, la légende peut être réduite ou masquée afin de libérer de l'espace. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-03-DESIGN_05_CA_CATEGORIE-1024x637.png) --- ### Catégories - Axe X L'axe horizontal utilise le champ : ``` Categorie ``` ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-04-DESIGN_05_CA_CATEGORIE-1024x639.png) Les paramètres doivent permettre de conserver une bonne lisibilité des noms de catégories. --- ### Valeurs - Axe Y L'axe vertical représente : ``` ChiffreAffaires ``` ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-05-DESIGN_05_CA_CATEGORIE-1024x763.png) --- ### Série ChiffreAffaires La série utilisée est : ``` ChiffreAffaires ``` ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_TdB-propriete-graph-06-DESIGN_05_CA_CATEGORIE-1024x689.png) Les propriétés de la série permettent d'adapter le rendu des colonnes et de conserver une cohérence avec l'identité graphique définie dans les chapitres précédents. --- ## Vérifier le comportement des filtres Les graphiques sont maintenant connectés aux deux listes déroulantes. Testez plusieurs combinaisons : - Pays = Tous les pays / Année = Toutes les années ; - Pays = un pays / Année = Toutes les années ; - Pays = un pays / Année = une année ; - Pays = Tous les pays / Année = une année. Les deux graphiques doivent se mettre à jour en fonction du contexte sélectionné. Cette vérification est importante : les KPI et les graphiques utilisent désormais les mêmes filtres et doivent présenter une information cohérente. --- ## Résultat Le tableau de bord dispose maintenant de deux graphiques modernisés et intégrés à l'ensemble des filtres. Nous avons conservé les composants graphiques natifs de BiBOARD tout en améliorant leur présentation grâce à leurs propriétés internes. Le résultat obtenu repose donc toujours sur le même principe : ``` SQL ↓ Datasource ↓ Composant ↓ Personnalisation ``` Mais le composant n'est plus considéré comme un simple élément permettant d'afficher des données. Il devient un véritable élément de conception de l'application Web de reporting. ![](https://wiki.biboard.fr/wp-content/uploads/2026/08/V18__Chap3_Attendu-Graphiques-final-1024x543.png) --- ## Ce qu'il faut retenir La personnalisation d'un tableau de bord ne nécessite pas systématiquement de remplacer les composants natifs par du HTML. Les composants graphiques de BiBOARD disposent déjà de nombreuses possibilités de personnalisation. La démarche consiste à : 1. partir du besoin de présentation ; 2. adapter les données si nécessaire ; 3. configurer la Datasource ; 4. reconnecter les paramètres ; 5. personnaliser le composant ; 6. vérifier la cohérence du résultat avec les autres éléments du tableau de bord. Dans ce chapitre, nous avons également vu qu'une évolution de la présentation peut nécessiter une évolution du SQL. Le SQL n'est donc pas uniquement utilisé pour calculer les indicateurs : il prépare également les données nécessaires à leur représentation graphique. --- ## Pour aller plus loin Les deux graphiques utilisenLes graphiques sont maintenant : - adaptés aux filtres **Pays** et **Année** ; - configurés pour améliorer leur lisibilité ; - harmonisés avec l'identité visuelle du tableau de bord. Nous allons maintenant nous intéresser au **tableau croisé dynamique (TCD)**. Comme pour les graphiques, nous partirons du composant existant pour améliorer progressivement : - son contenu ; - les données affichées ; - sa présentation ; - sa lisibilité ; - son intégration avec les filtres du tableau de bord. Le TCD n'est actuellement pas lié à la sélection de l'année. Nous allons notamment étudier comment le connecter au filtre **Année**, afin que les différentes zones du tableau de bord puissent présenter des informations cohérentes avec le contexte sélectionné. **Objectif :** ne pas seulement embellir le TCD, mais réfléchir à la manière dont il s'intègre dans l'application Web de reporting et dans son contexte de navigation.t encore les composants natifs de BiBOARD.