Fermer

juillet 25, 2023

Ajout de graphiques, création de tableaux de bord dans Web Report Designer

Ajout de graphiques, création de tableaux de bord dans Web Report Designer


C’est vrai : rien ne convertit les données en informations utiles plus rapidement et avec plus d’impact qu’un bon visuel. Vous pouvez ajouter le ou les graphiques dont vous avez besoin aux rapports disponibles à partir de votre application à l’aide du concepteur de rapports Web intégré.

Le rapport idéal vous donne les données dont vous avez besoin et, lorsque le rapport est embarqué dans votre application, vous donne ces données là où vous en avez besoin.

Parfois, les données dont vous avez besoin sont mieux exprimées visuellement : sous forme de graphique ou même d’ensemble de graphiques, un tableau de bord. Vous seul savez de quelle entrée visuelle vous avez besoin pour prendre en charge la façon dont vous utilisez votre application et, avec Progress Concepteur de rapports Web Telerik intégré dans votre application, vous pouvez créer cette entrée visuelle sans quitter l’application où vous utiliserez le rapport.

Avant d’ajouter un graphique à votre rapport, vous devez sélectionné au moins une source de données. Une seule source de données peut suffire, mais si vous souhaitez créer un tableau de bord, n’hésitez pas à ajouter d’autres sources de données à votre rapport pour prendre en charge tous les graphiques souhaités.

Ajout de votre graphique

Une fois que vous avez ajouté vos sources de données à votre rapport, l’étape suivante consiste à sélectionner le graphique souhaité et à le faire glisser dans une section de votre rapport.

Si vous avez créé des rapports en faisant glisser et en déposant des champs dans la section Détails de votre rapport, vous savez que tout dans votre section Détails est répété pour chaque ligne de votre source de données. Cependant, vous ne souhaitez probablement pas que votre graphique apparaisse plus d’une fois dans votre rapport. Vous avez deux façons d’empêcher la répétition de votre graphique :

  • Assurez-vous que votre rapport n’est pas lié à votre source de données. Dans l’onglet Explorateur à gauche du concepteur, sélectionnez la ligne du haut (c’est la ligne avec le nom de votre rapport). Dans le panneau de droite, développez la section Données et assurez-vous que la liste déroulante Source de données est définie sur (aucune).

Le Concepteur de rapports affichant l'onglet Explorateur à gauche et le panneau à droite.  Dans l'onglet Explorateur, la ligne supérieure avec le nom du rapport a été sélectionnée et entourée d'un cercle.  Dans le panneau de droite, la section Données a été développée pour afficher une liste déroulante intitulée Source de données.  La liste déroulante est définie sur (aucun) et est encerclée.

  • Ajoutez votre graphique à une section de votre rapport qui, contrairement à la section Détails, ne s’affiche qu’une seule fois, la section En-tête du rapport, par exemple. Si vous n’avez pas encore d’en-tête de rapport dans votre rapport, dans l’onglet Explorateur à gauche du concepteur, cliquez sur la ligne du haut (votre nom de rapport). Passez ensuite à l’onglet Composant qui se trouve juste à côté de l’onglet Explorateur et faites défiler jusqu’aux sections de rapport. Double-cliquez sur la section En-têtes de rapport pour ajouter un en-tête de rapport à votre rapport.

Indice: L’ajout de votre graphique à la section En-tête du rapport vous permet de commencer votre rapport avec un graphique et de le suivre avec des données répétées dans la section Détails. Cependant, la taille par défaut d’un en-tête de rapport sera probablement trop petite pour contenir votre graphique. Ainsi, lorsque la section En-tête de rapport est ajoutée à votre rapport, cliquez dans le cercle au centre de la bordure inférieure de la section et faites-la glisser vers le bas pour augmenter la taille de l’en-tête de rapport.

Le concepteur de rapport avec trois sections et les panneaux de chaque côté.  La section du milieu a une bordure pointillée qui montre qu'elle est sélectionnée.  Le panneau de droite affiche les propriétés de la section sélectionnée qui est

Votre prochaine étape consiste à cliquer sur le graphique souhaité dans l’onglet Composants (les graphiques se trouvent, de manière pratique, juste au-dessus des sections de rapport dans l’onglet Composants) et faites glisser votre graphique dans votre section d’en-tête de rapport. Lorsque vous déposez votre graphique, un assistant pratique s’ouvre dans un panneau à droite du concepteur pour vous aider à configurer votre graphique. Il remplacera efficacement la zone Propriétés pour vous aider à démarrer la configuration de graphique souhaitée.

Indice: Avant de sélectionner un rapport dans l’onglet Composants, sélectionnez la section de votre rapport dans laquelle vous souhaitez ajouter le rapport. Le concepteur de rapport ne vous laissera même pas sélectionner un rapport à moins que votre sélection actuelle ne soit une section dans laquelle le concepteur peut placer un rapport.

Le concepteur du rapport montrant une section et les panneaux des deux côtés.  Dans le panneau de gauche, l'onglet des composants est sélectionné et la section Graphiques s'affiche.  Une ligne courbe indique que le graphique à barres (représenté par une icône flottant au-dessus du concepteur) est glissé sur la section dans le concepteur.  Sur la droite, la fenêtre des propriétés affiche un panneau intitulé Configure Bar Chart.

Votre graphique ne sera pas ajouté à votre rapport tant que vous n’aurez pas cliqué sur le bouton Créer en bas de l’assistant. Ainsi, si vous décidez que vous avez choisi le mauvais graphique ou que vous l’avez déposé dans la mauvaise section, vous pouvez simplement cliquer sur le bouton Annuler en bas de l’assistant, sélectionner le graphique souhaité dans l’onglet Composants, le déposer dans la bonne section et recommencer.

Configuration de votre graphique

L’assistant qui apparaît à droite du concepteur lorsque vous ajoutez votre graphique permet d’obtenir facilement le graphique souhaité en seulement trois étapes :

  1. En haut de l’assistant, il y a une liste déroulante qui vous permet de choisir parmi différentes versions du type de graphique que vous avez sélectionné (avec un graphique en courbes, par exemple, vous pouvez choisir parmi une ligne simple, une ligne empilée, une ligne avec des marqueurs, etc.).

  2. Sous cette liste déroulante se trouve une autre liste déroulante qui vous permet de sélectionner la source de données avec les données que vous souhaitez représenter graphiquement.

  3. Une fois que vous avez sélectionné une source de données, la zone Champs de source de données sous la liste déroulante Source de données se remplira avec la liste des champs de votre source de données. Maintenant, il suffit d’ajouter les champs que vous voulez aux trois sections sous l’en-tête Fields Arrangement pour générer votre graphique.

Le panneau de droite affichant l'assistant de configuration de graphique avec des numéros identifiant chaque section.  La section supérieure - numérotée 1 - contient une liste déroulante intitulée Type de graphique en courbes, a une liste déroulante - la liste déroulante affiche le texte Stacked Line avec une icône d'un graphique à plusieurs lignes).  Sous cette section se trouve un en-tête intitulé Data qui est développé.  La section en dessous, numérotée 2, contient une liste déroulante intitulée Source de données.  La liste déroulante est définie sur products1.  En dessous se trouve l'en-tête Champs de la source de données — numéroté 3. Cette zone contient une liste de cases contenant les noms de champ de la source de données — par exemple CategoryID, CategoryName, Description, etc. Chaque case a un ensemble de trois champs verticaux à son extrémité droite.  Sous la liste des champs se trouve la section Disposition des champs avec une flèche pointant vers elle.

Les trois zones sous l’en-tête Dispositions des champs sont : Catégories, Séries et Valeurs. La zone Série est l’endroit où vous spécifierez comment vous voulez que vos données soient étiquetées (c’est-à-dire l’axe X/ligne inférieure dans un rapport en colonnes).

Indice: Vous pouvez faire glisser un champ des champs de source de données vers l’une des zones Catégories, Séries ou Valeurs si cela vous convient. Vous pouvez également cliquer sur les trois points verticaux de chaque champ et sélectionner la zone à laquelle vous souhaitez ajouter le champ.

Une des cases de la liste des champs dans la liste Champ de source de données affichant les trois points verticaux sur le bord droit de la case du champ.  Un menu contextuel s'affiche avec trois choix : Ajouter aux catégories, Ajouter aux séries, Ajouter aux valeurs

La zone Valeurs est l’endroit où vous spécifiez les données que vous souhaitez représenter graphiquement : le champ scalaire de votre source de données qui contrôle les points sur un graphique en courbes ou la longueur des barres dans un graphique en barres.

Par défaut, lorsque vous ajoutez un élément à la zone Valeurs, le concepteur suppose que vous souhaitez additionner toutes les données d’une série. Si vous souhaitez modifier la façon dont vos données sont agrégées (par exemple, vous souhaitez voir la valeur moyenne plutôt que la somme), recherchez votre champ dans la zone Valeurs et cliquez sur les trois points verticaux à l’extrémité droite de la zone du champ. Cela affichera un menu avec Fonction en haut. Cliquez sur Fonction pour obtenir un autre menu avec une liste de fonctions d’agrégation (par exemple, la fonction d’agrégation Moyenne).

La zone Valeurs de la section Disposition des champs avec une seule case intitulée Somme (unités en stock) et affichant trois points verticaux à l'extrémité droite de la case.  Un menu contextuel s'affiche avec des éléments de ligne : Fonction, Monter, Descendre et Supprimer.

L’utilisation de la zone Catégories est facultative mais sera utile lorsqu’il est logique de regrouper les séries pour rendre votre graphique plus facile à lire. Cet exemple de graphique, par exemple, montre les unités en stock pour un grand nombre de produits, ce qui entraîne de nombreuses entrées le long de l’axe X. Cependant, le tableau regroupe également ces produits par le nom de la catégorie dont le produit fait partie, ce qui devrait faciliter la recherche d’un produit (enfin, à condition que vous sachiez dans quelle catégorie se trouve le produit).

Un graphique à colonnes avec plusieurs barres, codées par couleur vers une liste de produits dans une légende sur la droite.  Au bas du graphique figurent les noms des catégories par lesquelles les produits sont regroupés (par exemple, boissons, condiments, confiseries, etc.) avec un marqueur sur l'axe X indiquant le début et la fin de chaque catégorie.

Indice: Ne paniquez pas si vous ajoutez l’un de vos champs de source de données au mauvais endroit. Vous pouvez faire glisser des champs de n’importe laquelle des zones Catégories, Séries et Valeurs vers n’importe laquelle des autres zones avant de cliquer sur le bouton Créer.

Cliquez sur le bouton Créer et votre graphique est ajouté à votre rapport !

Prochaines étapes

Il y a beaucoup plus que vous pouvez faire avec vos graphiques. Vous pouvez, par exemple, profiter de la Filtres du concepteur de rapports pour contrôler quelles données pilotent les données de votre graphique. Si vous tirez également parti des paramètres du concepteur, vous pouvez filtrer dynamiquement les données utilisées dans vos graphiques pendant que vous consultez votre rapport.

Étant donné que ce tableau/tableau de bord est destiné à votre usage, l’apparence n’est peut-être pas une priorité pour vous. Toutefois, si vous souhaitez « habiller » l’apparence de votre graphique, sélectionnez simplement votre graphique dans Report Designer pour afficher le panneau de droite. Les paramètres de ce panneau vous permettent de contrôler l’apparence de votre graphique. Par exemple, la section Aucune donnée du panneau vous permettra de contrôler le message affiché dans le rapport lorsque votre source de données ne dispose d’aucune information disponible pour votre rapport.

Ou vous pouvez développer la section Apparence du panneau de droite pour révéler la section Style de la zone de tracé. Dans cette section, vous pouvez définir la couleur d’arrière-plan du graphique, l’image d’arrière-plan, le style de ligne, etc. L’expansion de la zone Présentation, d’autre part, révèle les zones Légende, Série et Titres qui vous permettent de contrôler l’apparence de ces éléments.

Rien ne vous empêche d’avoir exactement le graphique (ou le tableau de bord) que vous voulez dans l’application où vous en avez besoin. Vous disposez de tous les outils pour créer votre rapport idéal.

Prêt à tirer parti des rapports intégrés ?

Progrès Rapports Telerik fournit tous les outils dont vous avez besoin pour intégrer les rapports riches et interactifs dont vos utilisateurs ont besoin pour analyser et comprendre leurs données directement dans les applications de vos utilisateurs (y compris en permettant à vos utilisateurs d’exporter les résultats dans plus de 15 formats, soit pour les distribuer, soit pour les intégrer à d’autres outils d’analyse). Telerik Reporting vous permet ensuite d’aller plus loin et de donner à vos utilisateurs un concepteur de rapports Web entièrement fonctionnel pour créer les rapports qu’ils souhaitent sans jamais quitter les applications où ils utiliseront leurs rapports.

Vous pouvez tirer parti de ces outils faciles à utiliser dans n’importe quel environnement d’application Web côté client (HTML5/JS, Angular, React, Vue ou Blazor) et dans n’importe quelle application .NET (Web ou bureau : ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, WinForms et UWP).

Si vous ne l’avez toujours pas essayé, vous pouvez commencer un essai gratuit pour regarder de plus près. Un service d’assistance renommé et une panoplie de ressources vous aideront tout au long du chemin.




Source link