04 – Moderniser les graphiques

0:00 9:29

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.

Adapter les données aux graphiques #

Les deux graphiques existants présentent actuellement :

le chiffre d’affaires par mois ;
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.
...

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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 #

Titre #

Le titre doit permettre d’identifier immédiatement le contenu du graphique.

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.

Catégories – Axe X #

L’axe horizontal utilise le champ :

Categorie

Les paramètres doivent permettre de conserver une bonne lisibilité des noms de catégories.

Valeurs – Axe Y #

L’axe vertical représente :

ChiffreAffaires

Série ChiffreAffaires #

La série utilisée est :

ChiffreAffaires

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.

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 à :

partir du besoin de présentation ;
adapter les données si nécessaire ;
configurer la Datasource ;
reconnecter les paramètres ;
personnaliser le composant ;
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.

Updated on 19 août 2026