Widget Pie/Donut Chart


Apps - Widget - Pie Donut Chart icon.png Ce type de widget appartient à la catégorie Dashboards de la bibliothèque des widgets. Pour une mesure donnée, il permet de visualiser, à l'aide d'un diagramme à secteurs, la part ou proportion de chaque élément d'une dimension par rapport à la totalité des éléments (100 %). Les valeurs sont généralement exprimées en pourcentage.

Les 2 graphiques Pie Chart et Donut Chart fonctionnent exactement de la même façon, la seule différence étant que le cercle intérieur du diagramme Donut Chart est blanc.

Remarques

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

  • Généralement, le datasource comporte une colonne Dimension ; une ou plusieurs colonnes Mesure. Voir la structure habituelle d'un datasource
  • Ce diagramme ne peut traiter qu'une seule mesure.
    • Lorsque le datasource comprend plusieurs mesures, sélectionnez celle souhaitée via le Data Transformer. Sinon, c'est la première mesure qui est automatiquement traitée.
  • En mode Exécution, la légende affichée en haut à droite du graphique sert de filtre dynamique des données (propriété Chart Label -/- Legend > Legend) ; une bulle d'information est affichée en survolant chaque secteur.

Best Practice big icon.pngBonnes pratiques

  • Utilisez le widget Pie/Donut Chart pour visualiser la contribution de chaque élément de dimension dans l'ensemble ou pour mettre en relief la part d'un élément par rapport aux autres. 
  • Lorsque le nombre d’éléments de dimension est important et doit être affiché sur un espace restreint, utilisez le widget Bar Chart.
Best Practice icon.png   Widget Bar Chart Widget Pie/Donut Chart
EVApps - widgets Bar Chart and PieDonut - Best practice On.png EVApps - widgets Bar Chart and PieDonut - Best practice Off.png

Exemple

Visualiser le pourcentage d'incidents par employé (la mesure) et par service (la dimension avec 3 éléments : services Ventes, Marketing, Administration) sur un diagramme Donut Chart

Datasource Widget Pie/Donut Chart

Note : Le datasource comprend plusieurs mesures ; celle souhaitée (Nombre d'incidents par employé) est sélectionnée via le Data Transformer.

EVApps - widget PieDonut - Example DataSource.png

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

EVApps - widget PieDonut - 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
EnableDrilldown

Enable Drilldown (Note : Uniquement sur un datasource EasyVista utilisant une vue avec ruptures) : Indique si les données sont agrégées (case cochée - la fonctionnalité de drill-down est activée), ou non (case non cochée).
         Example documentation icon FR.png  Widget Breadcrumbs : Répartition des matériels par localisation

Best Practice icon.png

  • Ne cochez pas la case lorsque vous souhaitez que le widget présente le détail d'un niveau de rupture.
  • Ajoutez un widget Breadcrumbs pour aider à la navigation entre les différents niveaux de rupture.

Data

FirstRowContainsDimensionElements

First Row Contains Dimension Elements : Permet de spécifier la structure du datasource, en indiquant si les éléments de dimension se situent dans la première colonne (case non cochée : structure habituelle du datasource) ou sur la première ligne (case cochée). Note : Cette propriété ne modifie pas le comportement du Data Transformer.

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.

Example documentation icon FR.png    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.

Example documentation icon FR.png    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

MaximumNumberOfDisplayedData

Maximum Number Of Displayed Data : Pour chaque mesure sélectionnée dans le datasource, indique le nombre maximal d'éléments de dimension à afficher, pour éviter que le graphique ne devienne illisible.

Example documentation icon FR.png  Afficher un diagramme à barres des incidents et des demandes par employé  - Open url.png voir champ Maximum Number Of Data

  • Le comptage est toujours effectué à partir du premier élément de dimension.
  • Lorsque le nombre d'éléments de dimension à afficher est inférieur au nombre d'éléments de dimension à charger, un élément de dimension Autres est ajouté automatiquement au diagramme : il comprend le cumul des valeurs de tous les éléments de dimension non affichés.

Chart

Chart Type (Pie/Donut) : Type de graphique à afficher.

Donut option Pie option

Diagramme circulaire avec un cercle intérieur blanc

EVApps - widget PieDonut - Pie Chart.png

Diagramme circulaire plein

EVApps - widget PieDonut - Donut Chart.png

ColorTheme

Color Theme : Thème de couleurs appliqué au graphique, agissant sur la couleur des données graphiques et sur la couleur des boutons de légende.

  • La liste est fournie par Logo - EasyVista.png
  • Le nombre de couleurs du thème est indiqué à côté de son nom (ex : Brown (6), Default (12), EasyVista (7)).

         Apps - widgets Dashboards - Color theme.png

Chart Label -/- Legend

ChartLabelLegendPieDonutChart

Propriétés des légendes

Propriété Description Représentation
Element Objet à formater EVApps - Graphic Properties - Chart Label Element Pie Donut Chart.png
(1) Label : Légendes des secteurs
(2) Legend : Légendes affichées en haut à droite du graphique
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

Legend

Legend : Indique si la légende doit être affichée en haut à droite du graphique (case cochée) ou être masquée (case non cochée).

  • Chaque légende est constituée de l'intitulé de l'élément de dimension (les libellés sont ceux contenus dan la source de données) précédé d'un bouton.
  • La couleur des boutons est définie par le thème appliqué au graphique (propriété Chart > Color Theme).
  • Note : En mode Exécution, la légende sert de filtre dynamique des données : en cliquant sur un bouton ou un intitulé, les valeurs correspondantes sont affichées / masquées su rle graphique.
             Apps - widgets Dashboards - Legend.png

Display/Hide Labels : Indique si les légendes des secteurs doivent être affichées (case cochée) ou non (case non cochée). Note : Le cas échéant, utilisez la propriété Label Outside pour définir leur emplacement.

Color of Arc Text : Indique si les légendes de chaque secteur sont affichées dans une couleur particulière (case cochée) ou en noir (case non cochée).

Label Type : Définit le contenu des légendes de chaque secteur. Note : Utilisez la propriété Label Outside pour indiquer leur emplacement.

  • Value : Affiche la valeur de l'élément de dimension.
  • Label : Affiche le libellé de l'élément de dimension.
  • Percent : Affiche la part de l'élément de dimension exprimée en pourcentage.
  • Label and Percent : Affiche le libellé de l'élément de dimension, ainsi que la part exprimée en pourcentage.

Labels Outside : Indique si les légendes sont affichées à l'intérieur des secteurs (case cochée) ou à l'extérieur des secteurs (case non cochée).

Case cochée Case non cochée
EVApps - widget PieDonut - Label inside.png EVApps - widget PieDonut - Label outside.png

Label Threshold : Seuil au delà duquel les légendes des éléments de dimension sont inscrites dans les secteurs. Note : Le seuil s'applique à l'unité d'affichage des légendes définie via la propriété Label Type.
         Example documentation icon FR.png  Seuil = 0.15 ; Affichage de pourcentages  ==>  Seules les légendes des secteurs dont la part, exprimée en pourcentage, est supérieure à 15% sont affichées.

Theme

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

Tags:
Modifié par Utilisateur inconnu le 2017/09/01 17:29
Créé par Administrator XWiki le 2014/11/12 22:14

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help

Glossaire

Powered by XWiki ©, EasyVista 2020