DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV 2024 !
Aide / Tuto WINDEV / Tuto - Application WINDEV : gérer des données
  • Leçon 6 - Graphe et Tableau croisé dynamique
  • Présentation
  • Affichage de données dans un champ Graphe
  • Sélection des données à afficher dans le champ Graphe
  • Création du champ Graphe
  • Test du champ Graphe
  • Création de tableaux de synthèse grâce au champ Tableau croisé dynamique
  • Création du champ Tableau croisé dynamique
  • Test du champ Tableau croisé dynamique
  • En résumé

Tuto - Application WINDEV : gérer des données

Leçon 6 - Graphe et Tableau croisé dynamique
Ce que vous allez apprendre :
  • Afficher les données sous forme de graphe.
  • Réaliser des tableaux de synthèse grâce au champ Tableau croisé dynamique.
Durée de la leçon 30 mn
Présentation
Dans une application de gestion, la présentation de statistiques ou de tableaux récapitulatifs est souvent nécessaire. Ce type de présentation peut être utilisé par exemple pour suivre :
  • l'évolution des commandes dans le temps,
  • l'évolution du chiffre d'affaires,
  • l'évolution des stocks,
  • ...
Tout décideur demande ces informations.
Pour inclure rapidement et simplement ces informations dans vos applications, WINDEV propose de nombreux champs. Dans cette leçon, nous allons utiliser deux champs spécifiques :
  • le champ Graphe.
  • le champ Tableau croisé dynamique.
Affichage de données dans un champ Graphe
Pour manipuler le champ Graphe en conditions réelles, nous allons proposer dans l'application "WD Application Complète" un champ Graphe présentant l'état des ventes.
Dans un premier temps, nous allons créer une requête permettant de sélectionner les données, puis nous créerons un champ Graphe affichant ces données.

Sélection des données à afficher dans le champ Graphe

Pour réaliser notre graphe, nous voulons la somme des commandes effectuées par date.
Nous allons créer une requête qui effectue une somme. En effet, nous allons faire le cumul du montant total des commandes (rubrique TotalTTC dans le fichier de données Commande).
Nous allons calculer le total de toutes les commandes par date (le Chiffre d'Affaires par date).

Pour créer une nouvelle requête :
  1. Cliquez sur Créer un élément parmi les boutons d'accès rapide.
  2. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Requête".
  3. Nous allons réaliser une requête de sélection. Sélectionnez l'option "Sélection (SELECT)". Passez à l'étape suivante.
  4. La fenêtre de description de la requête apparaît.
  5. Ajoutez les rubriques Commande.Date et Commande.TotalTTC à la requête :
    • Sur la gauche, déroulez le fichier de données "Commande".
    • Double-cliquez sur la rubrique Date puis sur la rubrique TotalTTC.
    • Les deux rubriques apparaissent au centre de l'écran (dans la zone "Liste des éléments de votre requête").
Pour effectuer la somme des valeurs de "Commande.TotalTTC" :
  1. Sélectionnez la rubrique "Commande.TotalTTC" au centre.
  2. Dans les "Actions", sur la droite, cliquez sur "Somme". La fenêtre de description de la somme apparaît.
    Requête - Fenêtre de description d'une somme
  3. Validez la description de la somme. La somme des "TotalTTC" a été ajoutée dans la liste du résultat de la requête.
Au fur et à mesure de la création de la requête, l'éditeur de requêtes de WINDEV crée les requêtes en langage naturel (et également en SQL).
Description de la requête en langage naturel
Vous pouvez ainsi vérifier que vous ne vous êtes pas trompé par rapport à l'objectif de votre requête.
Nous allons maintenant regrouper les données par année et les trier :
  1. Sélectionnez la rubrique "Commande.Date" au centre.
  2. Dans les "Actions", sur la droite, cliquez sur "Année, département" et sélectionnez "Année". Une fenêtre s'affiche permettant de créer la rubrique Année :
    Tri sur l'année
  3. Validez cette fenêtre (bouton "OK").
  4. La rubrique "Année" s'affiche au centre de la description de la requête.
  5. Sélectionnez la rubrique "Année" et définissez le tri :
    • Affichez le menu contextuel de la rubrique "Année".
    • Sélectionnez l'option "Trier la rubrique .. Trier par ordre croissant".
    • Une flèche indiquant le tri apparaît dans la description de la requête.
La requête est créée. Nous allons lui donner un nom et la sauvegarder.
  1. En haut de la fenêtre de description de la requête, saisissez :
    • le nom "REQ_EvolutionsVentes".
    • le libellé "Somme des commandes par date".
  2. Validez la fenêtre de description de la requête.
  3. La fenêtre de sauvegarde apparaît. Validez les informations proposées.
  4. La représentation graphique de la requête est la suivante :
    Représentation graphique de la requête
  5. Cliquez sur Tester un élément pour tester la requête.

Création du champ Graphe

Nous allons intégrer le champ Graphe dans un nouveau volet d'onglet de la fenêtre FEN_Menu.
Pour créer un nouveau volet d'onglet dans la fenêtre "FEN_Menu" :
  1. Affichez si nécessaire la fenêtre "FEN_Menu" sous l'éditeur de fenêtres.
  2. Double-cliquez sur le champ Onglet : la fenêtre de description du champ s'affiche.
  3. Dans l'onglet "Général", sélectionnez le volet d'onglet "Recherche de commandes" et cliquez sur le bouton "Nouveau". Un nouveau volet d'onglet apparaît.
  4. Sélectionnez le nouveau volet d'onglet (nommé "Volet 4").
  5. Dans la partie droite de l'écran, saisissez le libellé du volet d'onglet : "Graphe".
  6. Dans la partie droite de l'écran, sélectionnez une image dans le catalogue d'images :
    • Cliquez sur le bouton Afficher les options des images à droite du champ "Image". Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue".
    • La fenêtre du catalogue d'images apparaît.
    • Dans le champ de recherche, saisissez "Graphe".
    • Lancez la recherche en cliquant sur le bouton avec la loupe.
    • Sélectionnez par exemple l'icône Graphe et validez les différents écrans qui s'affichent.
  7. Validez la fenêtre de description du champ Onglet.
  8. Un nouveau volet d'onglet apparaît dans la fenêtre.
Pour créer le champ Graphe :
  1. Dans la fenêtre "FEN_Menu", sélectionnez le volet d'onglet "Graphe" si nécessaire.
  2. Sous le volet "Création", dans le groupe "Champs graphiques", cliquez sur "Graphe". Le champ apparaît sous le curseur de la souris.
  3. Cliquez dans le volet d'onglet "Graphe". L'assistant de création d'un champ Graphe se lance.
  4. Dans l'assistant, sélectionnez un graphe de type "Histogramme".
    Assistant de création d'un champ Graphe
    Passez à l'étape suivante de l'assistant.
  5. Saisissez les paramètres du graphe :
    • le titre : "Evolution des ventes".
    • la légende : le graphe est sans légende.
    • les étiquettes doivent être affichées.
  6. Passez à l'étape suivante.
  7. Saisissez les paramètres des axes :
    • Titre de l'axe des X : Année
    • Titre de l'axe des Y : CA
    Conservez les options par défaut et passez à l'étape suivante.
  8. Nous allons maintenant définir la source des données.
    • Pour les étiquettes (valeurs affichées en bas du graphe, dans notre exemple, ce sont les années) :
      • la source correspond à : "Parcours d'un fichier ou d'une requête",
      • les données correspondent à la rubrique Année dans la requête REQ_EvolutionsVentes.
        Source de données du champ Graphe
    • Pour les séries (valeurs affichées dans le champ Graphe) : le champ graphe va afficher une seule série correspondant au total TTC calculé par la requête REQ_EvolutionsVentes.
      • Cliquez sur le bouton "+".
      • Double-cliquez dans la colonne "Libellé" de la première ligne du tableau "Sources des séries". La colonne "Libellé" passe en édition.
      • Saisissez le libellé "Série 1".
      • La source correspond à : "Parcours d'un fichier ou d'une requête",
      • Les données correspondent à la rubrique "La_somme_TotalTTC" dans la requête REQ_EvolutionsVentes.
        Source de données du champ Graphe
    Passez à l'étape suivante.
  9. Nous n'allons pas associer d'image de fond au champ Graphe. Passez à l'étape suivante.
  10. Donnez un nom au champ Graphe : "GRF_EvolutionsVentes" et terminez l'assistant.
  11. Le champ Graphe est automatiquement créé sous l'éditeur.

Test du champ Graphe

Testez la fenêtre (Tester la fenêtre parmi les boutons d'accès rapide).
  1. Cliquez sur le volet d'onglet "Graphe" pour visualiser le graphe.
    Visualisation du graphe en mode test

    Fonctionnalités automatiques du champ Graphe (FAA)
    Comme le champ Table, le champ Graphe propose plusieurs fonctionnalités automatiques accessibles via son menu contextuel. Pur plus de détails, consultez Manipulations des champs Graphe en exécution (FAA).
  2. Terminez le test et revenez sous l'éditeur.
Création de tableaux de synthèse grâce au champ Tableau croisé dynamique
Pour manipuler le champ Tableau croisé dynamique en conditions réelles, nous allons réaliser un champ Tableau croisé dynamique permettant de visualiser les ventes de produits par pays et par an en quantité et en chiffre d'affaires.
Fenêtre contenant un champ Tableau croisé dynamique
Comme pour le champ Graphe, nous allons créer le champ Tableau croisé dynamique dans un nouveau volet d'onglet de la fenêtre FEN_Menu.

Pour créer un nouveau volet d'onglet dans la fenêtre "FEN_Menu" :
  1. Affichez si nécessaire la fenêtre "FEN_Menu" sous l'éditeur de fenêtres.
  2. Double-cliquez sur le champ Onglet : la fenêtre de description du champ s'affiche.
  3. Dans l'onglet "Général", sélectionnez le volet d'onglet "Graphe" et cliquez sur le bouton "Nouveau". Un nouveau volet d'onglet apparaît.
  4. Sélectionnez le nouveau volet d'onglet (nommé "Volet 5").
  5. Dans la partie droite de l'écran, saisissez le libellé du volet d'onglet : "Tableau croisé dynamique".
  6. Dans la partie droite de l'écran, sélectionnez une image dans le catalogue d'images :
    • Cliquez sur le bouton Afficher les options des images à droite du champ "Image". Dans le menu contextuel qui s'affiche, sélectionnez l'option "Catalogue".
    • La fenêtre du catalogue d'images apparaît.
    • Dans le champ de recherche, saisissez "Tableau".
    • Lancez la recherche en cliquant sur le bouton avec la loupe.
    • Sélectionnez par exemple l'icône Tableau et validez les différents écrans qui s'affichent.
  7. Validez la fenêtre de description du champ Onglet.
  8. Le nouveau volet d'onglet apparaît dans la fenêtre.

Création du champ Tableau croisé dynamique

Pour créer un champ Tableau croisé dynamique :
  1. Dans la fenêtre "FEN_Menu", sélectionnez le volet d'onglet "Tableau croisé dynamique" si nécessaire.
  2. Sous le volet "Création", dans le groupe "Données", déroulez "Table et Liste" et sélectionnez "Tableau croisé dynamique (TCD)". Le champ apparaît sous le curseur de la souris.
  3. Cliquez dans le volet d'onglet "Tableau croisé dynamique". L'assistant de création d'un champ Tableau croisé dynamique se lance.
  4. Passez à l'étape suivante.
  5. Dans les cellules, nous voulons afficher deux informations :
    • le total des ventes.
    • la quantité vendue.
    Dans l'assistant, nous allons tout d'abord sélectionner le fichier de données source : LigneCommande.
    Pour la première information, sélectionnez :
    • Afficher : "La somme de".
    • Source : "TotalTTC".
    Cliquez sur le bouton "Ajouter une valeur supplémentaire".
    Pour la seconde information, sélectionnez :
    • Afficher : "La somme de".
    • Source : "Quantité".
      Assistant de création d'un champ Tableau croisé dynamique
    Passez à l'étape suivante.
  6. Dans les entêtes des colonnes, nous voulons afficher les années. Dans la partie gauche, déroulez le fichier de données Commande et double-cliquez sur la rubrique Date.
    Assistant de création d'un champ Tableau croisé dynamique
    Passez à l'étape suivante.
  7. L'assistant propose une liaison pour atteindre le fichier de données Commande et propose d'afficher en entête trois niveaux d'informations : les années, les trimestres et les mois.
    Assistant de création d'un champ Tableau croisé dynamique
  8. Passez à l'étape suivante.
  9. Dans les entêtes des lignes, nous voulons afficher les produits regroupés par pays. Dans la partie gauche :
    • déroulez le fichier de données Client et double-cliquez sur la rubrique Pays.
    • déroulez le fichier de données Produit et double-cliquez sur la rubrique Libellé.
      Assistant de création d'un champ Tableau croisé dynamique
    Passez à l'étape suivante.
  10. Dans les étapes suivantes, l'assistant propose une liaison pour chaque entête de ligne (Client.Pays et Produit.Libellé). Validez chaque liaison proposée en passant à l'étape suivante.
  11. Donnez un nom au champ Tableau Croisé Dynamique : TCD_Ventes.
  12. Validez l'assistant.
  13. Le champ Tableau croisé dynamique est automatiquement créé dans la fenêtre ainsi qu'un champ Bouton "Calculer". Ce champ Bouton va permettre à l'utilisateur de lancer le calcul des données à afficher dans le champ Tableau croisé dynamique. Ce champ Bouton peut être placé à n'importe quel endroit dans la fenêtre.
  14. Enregistrez la fenêtre (Enregistrer l'élément parmi les boutons d'accès rapide).

Test du champ Tableau croisé dynamique

Testez la fenêtre (Tester la fenêtre parmi les boutons d'accès rapide).
  1. Cliquez sur le volet d'onglet "Tableau croisé dynamique" puis sur le champ "Calculer".
    ATTENTION : Selon la taille de la base de données et le nombre d'entêtes de lignes et de colonnes, les temps de calcul peuvent être plus ou moins longs. Vous pouvez sauvegarder le résultat du tableau croisé dynamique pour éviter le recalcul à chaque interrogation.
  2. Cliquez sur les ">" pour dérouler les différentes colonnes et lignes.
    Test de la fenêtre contenant le champ Tableau croisé dynamique
Arrêtez le test. Nous allons faire une petite amélioration dans ce champ Tableau croisé dynamique. En effet, rien n'indique qu'un des chiffres dans les cellules correspond à une quantité. Nous allons utiliser un masque d'affichage spécifique pour cette valeur.
Pour mettre un masque d'affichage dans une cellule :
  1. Affichez la description du champ Tableau croisé dynamique (double-clic sur le champ).
  2. Dans l'onglet "Contenu", cliquez sur "VAL_SansNom2". La description des valeurs affichées dans les cellules apparaît.
  3. Dans la zone "Masque", ajoutez le préfixe "Qt : ".
    Description du champ Tableau croisé dynamique
  4. Validez la fenêtre de description.
  5. Relancez le test de la fenêtre.
En résumé
Projet corrigé
Vous voulez vérifier le résultat de vos manipulations ?
Un projet corrigé est disponible. Ce projet contient les différentes fenêtres créées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Application WINDEV : gérer des données", double-cliquez sur "Application complète - Corrigé".
Cette leçon nous a permis de découvrir comment proposer des statistiques à l'utilisateur final grâce aux champs Graphe et Tableau croisé dynamique.
La prochaine leçon nous permettra de découvrir comment intégrer l'envoi d'un email dans une application WINDEV.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 16/11/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale