Widget Gauge

Modifié le 08/11/2022 13:22

Apps - Widget - Gauge Chart icon.png Ce type de widget appartient à la catégorie Dashboards de la bibliothèque des widgets. Pour un élément de dimension donné, il permet de positionner une valeur observée sur une jauge en demi-cercle, à l'aide d'une aiguille ; l'analyse est facilitée grâce à une échelle quantitative avec des seuils définissant la couleur d'affichage des secteurs de la jauge (ex. : rouge, jaune, vert).

Remarques

Open url.png  voir Remarques générales sur les widgets

  • Le datasource doit comporter : une colonne Dimension ; une colonne Mesure : Valeur observée.
  • Ce diagramme ne peut traiter qu'un seul élément de dimension : le datasource doit comporter uniquement la ligne relative à cet élément, en plus de la ligne d'en-têtes.
  • La légende du diagramme à barres correspond à l'élément de dimension.

Best Practice big icon.pngBonnes pratiques

  • Utilisez le widget Gauge pour positionner une valeur par rapport à des seuils sous forme de secteurs dont la couleur est personnalisable.
  • Pour situer une valeur par rapport à un objectif chiffré à l'aide d'un diagramme à barres, utilisez le widget Bullet Chart.

Exemple

Pour le nombre d'incidents en retard (la mesure), visualiser sur une jauge la valeur réalisée (l'aiguille) par rapport à une échelle quantitative divisée en 3 secteurs

Datasource Widget Gauge (jauge allant de 0 à 50)

avec une échelle quantitative à 2 seuils (3 intervalles)

EVApps - widget Gauge - Example DataSource.png

Download Zip icon.png Téléchargez Exemple (fichier CSV)

Apps - widget Gauge - Thresholds Reduce Example.png

EVApps - widget Gauge - Example Chart.png

Liste des propriétés

Content

DataSource

DataSource : Source de données externes liée au widget. 

  • La liste déroulante affiche tous les datasources disponibles dans l'application. 
  • Pour modifier le datasource ou visualiser son contenu, cliquez sur Apps - Edit icon.png. Le bouton Apps - datasources Properties - Preview button.png sous la propriété Configure Field Types affiche le nombre de lignes (maximum 15) et de colonnes extraites.
  • Pour définir un nouveau datasource, cliquez sur Apps - Add datasource icon.png Add Data Source dans le volet Objets.
DataTransformer

Data Transformer : Permet de définir la structure et le périmètre du datasource, d'appliquer des fonctions d'agrégation statistiques et de modifier l'ordre d'affichage des mesures.

  • Cliquez sur Setup / Preview Data sous la propriété Data Transformer pour ouvrir la fenêtre dédiée -  Open url.png  voir Description

ThresholdsStatus

Thresholds Status : Permet de définir de 1 à 4 seuils quantitatifs (2 à 5 intervalles) sur une échelle de valeurs. Chaque changement de seuil correspond à un changement de couleur de l'échelle.


Les seuils définissent la couleur d'affichage des secteurs de la jauge  - Open url.png  voir Exemple et Procédure

DefineThresholds
Mode Réduit Mode Étendu

3 changements de couleur avec 2 seuils

EVApps - widgets Dashboards - Thresholds Reduce.png

5 changements de couleur avec 4 seuils

EVApps - widgets Dashboards - Thresholds Expand.png

Min Value : Valeur de départ de la jauge. Par défaut, 0.

Max Value : Valeur de fin de la jauge. Par défaut, valeur observée lue dans le datasource.

Data

SortByValueDescending

Sort By Value Descending : Permet de trier les valeurs des éléments de dimension par ordre descendant (case cochée - de la plus grande valeur à la plus petite valeur) ou par ordre de lecture du datasource (case non cochée). Note : L'ordre appliqué est toujours déterminé par les éléments de dimension de la première mesure du datasource.

exemple    Afficher un diagramme à barres des incidents et des demandes par employé

Le datasource comprend une dimension Service avec 3 éléments. Sort By Value Descending - Example - Datasource.png

Case cochée Case non cochée

Sort By Value Descending - Example - Sort value - On.png

Les éléments de dimension de chaque mesure sont triés par ordre descendant.

Sort By Value Descending - Example - Sort value - Off.png

Les éléments de dimension de chaque mesure sont affichés suivant l'ordre du datasource.

MaximumNumberOfData

Maximum Number Of Data : Pour chaque mesure sélectionnée dans le datasource, indique le nombre maximal d'éléments de dimension à charger depuis le datasource.

Best Practice icon.png  Renseignez cette propriété pour éviter des problèmes de performance sur de gros ensembles de données.

  • Le comptage est toujours effectué à partir du premier élément de dimension.
  • Lorsque le nombre d'éléments de dimension à charger est supérieur au nombre d'éléments de dimension du datasource, tout le datasource est chargé.
  • Pour visualiser le datasource, cliquez sur Apps - Edit icon.png en regard de la propriété Datasource, puis sur le bouton Apps - datasources Properties - Preview button.png sous la propriété Preview qui indique le nombre de mesures et le nombre d'éléments de dimension par mesure.

exemple    Afficher un diagramme à barres des incidents et des demandes par employé

Le datasource comprend une dimension Service avec 3 éléments. Sort By Value Descending - Example - Datasource.png

  • Maximum Number Of Data = 20 (valeur par défaut)
  • Maximum Number Of Displayed Data = 20 (valeur par défaut)
  • Maximum Number Of Data = 2
  • Maximum Number Of Displayed Data = 20 (valeur par défaut)
  • Maximum Number Of Data = 20 (valeur par défaut)
  • Maximum Number Of Displayed Data = 1

Sort By Value Descending - Example - Number Data - All.png

Pour chaque mesure, tous les éléments de dimension sont chargés et affichés, i.e. les 3 services

Sort By Value Descending - Example - Number Data - Part.png

Pour chaque mesure, seuls les 2 premiers éléments de dimension sont chargés et affichés, i.e. les 2 premiers services

Sort By Value Descending - Example - Displayed Data - Part.png

Pour chaque mesure, tous les éléments de dimension sont chargés mais seul le premier élément est affiché, correspondant au service Ventes ; un élément de dimension Autres est ajouté, correspondant aux services Marketing et Administration

Chart

Title : Titre du diagramme, inscrit sous la jauge. Note : Si le champ n'est pas renseigné, c'est le libellé de la colonne Dimension qui est pris en compte.

Width Scale (0.10 - 1.5) : Réglette permettant de modifier l'épaisseur du demi-cercle intérieur gris et du demi-cercle des seuils.

Épaisseur = 0,2 Épaisseur = 1,5
EVApps - widget Gauge - Width Scale Minimum.png EVApps - widget Gauge - Width Scale Maximum.png

Show Background Color : Indique si le demi-cercle intérieur gris doit être affiché sur la jauge (case cochée) ou non (case non cochée). Note : Utilisez la propriété Shadow Scale pour modifier l'épaisseur.

Case cochée Case non cochée
EVApps - widget Gauge - Show Background On.png EVApps - widget Gauge - Show Background Off.png

Show Shadow : Indique si l'ombre du demi-cercle intérieur gris doit être affichée sur la jauge (case cochée) ou non (case non cochée). Note : Utilisez la propriété Shadow Scale pour modifier l'épaisseur.

Case cochée Case non cochée
EVApps - widget Gauge - Show Shadow On.png EVApps - widget Gauge - Show Shadow Off.png

Shadow Scale (0.8 - 1.5) : Réglette permettant de modifier l'épaisseur de l'ombre du demi-cercle intérieur gris.

Needle Stroke Color : Indique si le contour de l'aiguille est affiché dans une couleur particulière (case cochée) ou en noir (case non cochée).

Needle Color : Indique si l'intérieur de l'aiguille est affiché dans une couleur particulière (case cochée) ou en noir (case non cochée).

Chart Label -/- Legend

ChartLabelLegendGauge

Propriétés des légendes

Propriété Description Représentation
Element Objet à formater EVApps - Graphic Properties - Chart Label Element Gauge.png
(1) Legend : Titre du graphique
(2) Values : Valeurs des mesures
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

Theme

  Open url.png  voir Description des propriétés

Procédure : Comment définir les seuils de valeurs

ProcedureDefineThresholds

Étape 1 : Saisie du nombre de seuils

1. Cliquez sur Apps - widgets Dashboards - Thresholds Reduce thumbnail icon.png, dans la zone Thresholds Editor Properties > Ranges domain, pour passer en mode Réduit avec 3 seuils.

2. Cliquez sur Apps - widgets Dashboards - Thresholds Expand thumbnail icon.png pour passer en mode Étendu avec 5 seuils.
 

Étape 2 : Saisie des seuils quantitatifs

1. Saisissez, dans la zone Status Thresholds, chaque valeur marquant un changement de couleur.
         EVApps - widgets Dashboards - Thresholds Value Select.png

2. Sélectionnez la couleur de chaque intervalle de valeurs.

  • Survolez la zone de couleur, cliquez sur EVApps - Color Palet icon 2.png puis sélectionnez la couleur souhaitée via le Color Picker.
             EVApps - widgets Dashboards - Thresholds Color Select - Picker.png 
  • Vous pouvez également saisir le nom ou le code hexadécimal de la couleur directement dans la zone de couleur.
             EVApps - widgets Dashboards - Thresholds Color Select - Code.png 

3. (optionnel) Cliquez sur [ ON ] dans la zone Thresholds Editor Properties > Symmetric colors pour rendre les couleurs des seuils symétriques par rapport à la couleur du seuil central.

Tags :
Powered by XWiki © EasyVista 2022