Widget Bar Chart


Apps - Widget - Bar 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 les valeurs des éléments d'une dimension à l'aide de barres dont la hauteur est proportionnelle à la quantité qu'elles représentent.

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.
  • Plusieurs mesures se rapportant aux mêmes éléments de dimension peuvent être traitées simultanément (ex. : Nombre d'incidents et Nombre de demandes pour les 3 mêmes services Ventes, Marketing, Administration).
    • Sélectionnez les mesures souhaitées via le Data Transformer. Sinon, toutes les mesures sont automatiquement traitées.
    • Chaque mesure donne lieu à un diagramme à barres différent positionné sur le même graphique.
  • 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.
  • L'échelle de valeurs de l'axe des mesures peut débuter à 0 ou à la valeur minimale des mesures sélectionnées ; elle se prolonge jusqu'à la valeur maximale des mesures sélectionnées. Pour affiner le pas des graduations entre ces 2 extrémités, augmentez la hauteur du widget.
  • La représentation graphique peut se faire sous la forme de bandes horizontales ou verticales.
  • Les barres peuvent être empilées (valeurs agrégées) ou mises côte à côte (valeurs unitaires).

Best Practice big icon.pngBonnes pratiques

  • Utilisez le widget Bar Chart lorsque les éléments de dimension définissent des données devant être comparées entre elles.
  • Si les éléments de dimension définissent une série chronologique (ex. : 12 mois consécutifs), utilisez le widget Line Chart pour afficher l'évolution dans le temps de la mesure ou pour comparer l'évolution de différentes mesures entre elles.
  • 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, utilisez le widget Pie/Donut Chart.

Exemple

Visualiser le nombre d'incidents (la mesure) par année (la dimension avec 3 éléments : services Ventes, Marketing, Administration) ; les données sont affichées sous le format Big Number (1k = 1000)

Datasource Widget Bar 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 Bar Chart - Example DataSource.png

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

EVApps - widget Bar Chart - 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).

exemple   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.

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

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.

exemple   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

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 EasyVista.
  • 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

MeasureAxisDataType

Measure Axis Data Type : Définit le format d'affichage des valeurs sur l'axe des mesures et dans les bulles informatives. Note : Le formatage des nombres (ex. : virgule ou point pour les décimales) dépend des paramètres de configuration de la plate-forme utilisée par l'utilisateur connecté (sous Windows : Panneau de configuration > Paramètres Région et langue).

  • Integer : Affiche des valeurs entières, arrondies à la décimale inférieure ou supérieure ;

    exemple   152200,10 ==> 152200

  • Float : Affiche des valeurs avec 2 décimales ;

    exemple   152200 ==> 152200,00

  • Big Number : Affiche des valeurs converties en milliers (k), millions (M), milliards (G), …, suivies du symbole de l'unité et arrondies à la centaine inférieure ou supérieure.

    exemple   152200 ==> 152k

Chart Orientation : Type d'orientation du graphique : affichage sous forme de barres horizontales ou sous forme de colonnes verticales.

Option Horizontal Option Vertical
EVApps - widget Bar Chart - Horizontal.png EVApps - widget Bar Chart - Vertical.png

Chart Type : Mode d'affichage des barres de valeurs des éléments de dimension.

  • Normalized Stacked Bar : Les valeurs de chaque élément de dimension d'une mesure sont empilées les unes au-dessus des autres. Ce mode d'affichage permet de comparer visuellement des agrégats de valeurs entre les différentes mesures (ex. : Comparer le nombre total d'incidents et le nombre total de demandes).
  • Grouped Bar Chart : Les valeurs de chaque élément de dimension d'une mesure sont affichées les unes à côté des autres. Ce mode d'affichage permet de comparer visuellement des valeurs unitaires entre les différents éléments de dimension pour chaque mesure (ex. : Comparer le nombre d'incidents entre chaque service ; Comparer le nombre de demandes entre chaque service).
            
    Option Normalized Stacked Bar Option Grouped Bar Chart
    EVApps - widget Bar Chart - Normalized stacked bar.png EVApps - widget Bar Chart - Grouped Bar Chart.png

Animation : En mode Exécution, indique si les barres de valeurs sont affichées les unes après les autres (case cochée : mode dynamique) ou simultanément (case non cochée : mode statique).

Chart Label -/- Legend

ChartLabelLegendBarLineChart

Propriétés des légendes

Propriété Description Représentation
Element Objet à formater EVApps - Graphic Properties - Chart Label Element Bar Line Chart.png
(1) Axis : Valeurs des axes
(2) Axis Legend : Légendes des axes
(3) 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

RotateDimensionAxisLabel

Rotate Dimension Axis Label : Indique si les étiquettes de l'axe des dimensions sont inclinées (case cochée - définissez la valeur de l'inclinaison via la zone Rotate value) ou affichées horizontalement (case non cochée).

RotateValue

Rotate Value (Note : Uniquement lorsque la case Rotate Dimension Axis Label est cochée) : Valeur de l'inclinaison des étiquettes de l'axe des dimensions.

  • Une valeur négative permet une inclinaison vers la droite.
  • Une valeur positive permet une inclinaison vers la gauche.
  • La valeur 0 définit aucune inclinaison.
             Apps - widgets Dashboards - X Axis label rotate value.png
BottomMargin

Bottom Margin (Note : Uniquement lorsque la case Rotate Dimension Axis Label est cochée) : Valeur de la marge entre le bas du graphique et le bas du cadre délimitant le widget, définissant l'espace d'affichage des étiquettes de l'axe des dimensions.
         Apps - widgets Dashboards - Bottom margin.png

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
DisplayDimensionAxisLabel

Display Dimension Axis Label : Indique si un titre doit être affiché sous l'axe des dimensions (case cochée - saisissez le libellé dans la zone Dimension Axis Label) ou non (case non cochée).

DisplayMeasureAxisLabel

Display Measure Axis Label : Indique si un titre doit être affiché à gauche de l'axe des mesures (case cochée - saisissez le libellé dans la zone Measure Axis Label) ou non (case non cochée).

Theme

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

Tags :
Powered by XWiki © EasyVista 2022