Comment créer un tableau de bord de reporting pour le suivi des KPI

Découvrez à quel point Telerik Reporting permet de créer facilement un tableau de bord avec des graphiques et des jauges pour mesurer vos KPI en un coup d’œil.

Créer un tableau de bord pour afficher les indicateurs clés de performance (KPI) est désormais plus facile que jamais grâce à Progress Reportage Telerik Jauges radiales et linéaires.

Le Jauge radiale et tout neuf Jauge linéaire sont deux composants qui rendent l’affichage de toutes les données numériques étendues très simple. La configuration ne pourrait pas être plus simple avec une petite collection de propriétés pour contrôler les plages, les étiquettes, les graduations et les échelles. Lorsqu’il est combiné avec une centrale électrique Tableau et Graphique composants et juste un peu de conception élégante, vous pouvez créer un tableau de bord véritablement à l’échelle de l’entreprise, prêt pour la salle de conférence.

Nous allons créer un rapport de tableau de bord KPI ensemble, une pièce à la fois. Si vous souhaitez simplement jouer avec le projet final, la solution complète est disponible dans ce Dépôt GitHub.

Note: Ce guide est rédigé en supposant que vous soyez familier avec Telerik Reporting. Si vous n’avez jamais utilisé Telerik Reporting auparavant, je vous recommande de consulter notre Salle de classe virtuelle cours avant de continuer.

Les étapes de ce tutoriel sont écrites avec Telerik Reporting Concepteur de rapports autonome à l’esprit. Vous pouvez choisir d’utiliser le Concepteur de rapports Webmais les étapes exactes diffèrent légèrement.

Étape 1 : Créer une mise en page de base

Tous les rapports sont intrinsèquement basés sur des pages et doivent respecter les limites des dimensions de page fixes. Pour un tableau de bord, vous avez un peu plus de flexibilité en termes de mise en page, mais nous souhaitons quand même pouvoir imprimer notre tableau de bord KPI. Pour cette raison, nous utiliserons une page standard de 8,5 x 11 lettres en orientation paysage. Voici les paramètres que j’ai utilisés.

• Paramètres de page :
  ◦ Paysage : vrai
  ◦ Marges : 0,5 pouces
  ◦ Paperkind : Lettre
• Largeur : 10 pouces

Désactivez également toutes les sections PageHeader, PageFooter, ReportHeader et ReportFooter. Cela ne laisse que la DetailSection pour notre mise en page. Je recommande de donner à la DetailSection une couleur d’arrière-plan subtile, telle que MintCream.

Vous pouvez voir l’état actuel de notre tableau de bord dans le KPI_Dashboard_1.trdp rapport

Étape 2 : définissez vos vignettes

J’aime l’apparence des tuiles pour un tableau de bord. Ceci est facilement réalisable dans Telerik Reporting et vous permet de planifier la mise en page de votre rapport KPI à un stade précoce. Faites simplement glisser un seul élément du panneau dans la page n’importe où et appliquez les paramètres suivants.

• Apparence
  ◦Style
  » Couleur de fond : Blanc
  » Style de bordure : solide
  »Largeur de bordure : 1 pt

Désormais, vous pouvez redimensionner et repositionner votre panneau où vous le souhaitez.

Conseil de pro 1 : Gagnez du temps en dupliquant ce panneau autant de fois que nécessaire au lieu de créer de nouveaux panneaux. Toutes les propriétés de style et de taille seront également dupliquées.

Conseil de pro 2 : Utilisez les options « Afficher la grille » et « Aligner sur la grille » pour un alignement parfait.

Vous pouvez voir l’état actuel de notre tableau de bord dans le KPI_Dashboard_2.trdp rapport.

Étape 3 : ajouter des données

Dans l’exemple de projet, je crée des données simulées aléatoires qui sont fournies via un service Web REST. Vous pouvez avoir des données différentes, mais si vous disposez d’indicateurs numériques, vous pouvez créer un tableau de bord KPI dessus.

Si vous utilisez un service REST, vous pouvez créer un WebServiceDataSource comme je l’ai fait. Vous pouvez également extraire vos données directement d’une base de données avec un SqlDataSource. Vous pouvez consulter notre Présentation du composant DataSource pour des options supplémentaires.

Étape 4 : Ajoutez vos jauges radiales

C’est ici que le plaisir commence ! Créons une jauge radiale multi-gamme. Choisissez une de vos tuiles (Panneaux) et faites un clic gauche dessus pour la mettre en surbrillance. Maintenant, sélectionnez la jauge dans le menu. Le Report Designer insérera automatiquement la jauge dans le panneau.

La jauge radiale est un élément lié aux données, vous devez donc commencer par définir la propriété DataSource sur la source de données créée à l’étape 3. Ensuite, vous souhaiterez configurer les propriétés Plages, Étiquettes et Tiques pour la Jauge multi-plage.

Définir pour chaque RadialGaugeRange :

• Commencer
• Fin
• Style
  ◦ Couleur d’arrière-plan

Vous pouvez ajuster les tiques, les étiquettes et l’aiguille selon vos besoins pour obtenir la jauge parfaite. Enfin, vous définirez la propriété Value pour contrôler la position de l’aiguille. Vous utiliserez probablement ici une fonction d’agrégation pour effectuer une opération sur vos données.

Profitez du Générateur d’expressions en cliquant sur le petit bouton ellipse dans le champ de valeur.

Voici un exemple d’expression : = Avg(Fields.timeToReply.TotalHours)

Une fois que votre jauge radiale multi-gamme est parfaite, vous pouvez utiliser la même astuce que nous avons utilisée avec le panneau. Dupliquez la jauge et déposez la copie dans un autre panneau. Vous pouvez ajuster les mesures, les valeurs ou les filtres selon vos besoins.

Note: Si vous utilisez Web Report Designer, la configuration d’une jauge est encore plus simple grâce à l’assistant de jauge radiale et linéaire. (Bientôt disponible dans le Concepteur de rapports autonome.)

Vous pouvez voir l’état actuel de notre tableau de bord dans le KPI_Dashboard_3.trdp rapport.

Étape 5 : ajoutez vos jauges linéaires

Nous pouvons désormais ajouter des jauges linéaires au tableau de bord pour un attrait visuel amélioré. Nous utiliserons une jauge linéaire multi-gamme et une jauge linéaire à plage unique. Vous pouvez répéter le même processus que vous avez suivi ci-dessus pour configurer ces deux jauges.

Vous pouvez voir l’état actuel de notre tableau de bord dans le KPI_Dashboard_4.trdp rapport.

Étape 6 : ajoutez vos graphiques et tableaux

Dans cette section suivante, vous pouvez ajouter des informations détaillées au tableau de bord pour compléter les informations résumées fournies par les jauges. Pensez à ce que vous aimeriez montrer avec vos données. Il peut s’agir d’une ligne de tendance, d’un modèle ou d’une distribution de valeurs. Le graphique est ce qui donne un aperçu des jauges.

Dans mon exemple, j’ai utilisé un nuage de points pour montrer la relation entre les temps de réponse et les évaluations des clients. Il peut s’agir d’un visuel important qui n’est pas capturé par un seul agrégat et qui aide à dévoiler une signification supplémentaire derrière vos statistiques.

La configuration exacte du graphique différera en fonction de vos données et du type de graphique sélectionné. Les différents assistants facilitent ce processus. Sélectionnez simplement votre source de données sur la première page de l’assistant, faites glisser les champs dans les cases respectives, puis cliquez sur « Terminer » pour prévisualiser le graphique. Si le graphique ne correspond pas à vos attentes, supprimez-le simplement et recommencez.

L’assistant est si rapide à utiliser que vous pouvez effectuer une itération rapide et essayer six configurations de graphiques différentes en moins d’une minute !

Désormais, pour le tableau, vous pouvez afficher les données brutes pour examen. Encore une fois, je recommande d’utiliser l’assistant Table. Sélectionnez la source de données et les champs que vous souhaitez afficher. Chaque champ devient une colonne basée sur les données dans le tableau. Vous pouvez également sélectionner un thème de tableau dans l’assistant pour donner à votre affichage un peu d’éclat.

Si vous le souhaitez, vous pouvez également ajouter un style statique ou conditionnel au tableau. Dans mon exemple, la colonne TTR utilise une mise en forme conditionnelle pour modifier la cellule backgroundColor lorsqu’un dossier a reçu une réponse dans un délai supérieur à 24 heures (ce qui est considéré comme une réponse tardive).

J’ai également utilisé cinq éléments de forme dans la colonne d’évaluation combinés à une mise en forme conditionnelle pour créer un visuel rapide de 5 étoiles pour l’évaluation, qui est beaucoup plus convivial qu’un chiffre 1-5.

Vous pouvez voir l’état actuel de notre tableau de bord dans le KPI_Dashboard_5.trdp rapport.

Étape 7 : Touches finales

Terminez en vérifiant vos jeux de couleurs et vos étiquettes, et en apportant les derniers petits ajustements aux positions et aux tailles des éléments du rapport. C’est le bon moment pour s’occuper des détails et rendre tout aussi parfait que vous le souhaitez.

La plupart des étiquettes que j’ai utilisées sont des éléments TextBox placés au-dessus des éléments de jauge. Cela entraînera une icône d’avertissement dans le concepteur, mais si vous faites attention au placement, vous pouvez ignorer l’avertissement.

Note: Si votre étiquette n’est pas visible dans le rapport terminé, vous pouvez utiliser l’option « Envoyer au premier plan » pour ajuster la position z de l’étiquette.

Vous pouvez voir l’état final de notre tableau de bord dans le KPI_Dashboard_Final.trdp rapport.

Toutes nos félicitations! Vous avez créé un tableau de bord Telerik Reporting !

Vous voulez essayer les rapports Telerik ?

Reportage Telerik est un outil de reporting intégré .NET complet, facile à utiliser et puissant pour les applications Web et de bureau qui prend en charge : Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, HTML5/JS, Angular, React, Vue , WPF, WinForms et UWP.

Également disponible dans le cadre de notre Telerik DevCraft bundle, Telerik Reporting vous permet de créer, styliser, visualiser et exporter des rapports riches, interactifs et réutilisables pour présenter de manière attrayante des données analytiques et commerciales. Ajoutez des rapports à n’importe quelle application métier via les contrôles de la visionneuse de rapports. Exportez les rapports prêts dans plus de 15 formats.

Si vous ne l’avez toujours pas essayé, vous pouvez commencer un essai gratuit pour y regarder de plus près. Nous fournissons également un service d’assistance dont nous sommes fiers et des ressources qui vous aideront tout au long du processus.

Essayez maintenant