Widget Funnel Chart


Apps - Widget - Funnel 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 chaque élément de dimension sur un graphique en entonnoir (empilement de sections de plus en plus grandes) ou en pyramide (empilement de sections de plus en plus petites). La forme du graphique est donnée par le positionnement d'un goulot d'étranglement. Celui-ci permet de mettre en évidence les valeurs ayant des écarts significatifs entre elles (partie haute du graphique), alors que les valeurs quasiment identiques sont empilées (partie basse du graphique).

De nombreuses propriétés permettent de mettre en forme le graphique : couleurs, largeur des 3 parties du graphique (haut / corps / bas), apparence et position des libellés, ...

Exemples

Les données du fichier CSV

  • la dimension = Les 6 dernières semaines
  • la mesure = Nombre d'incidents
  • les éléments affichés : Le nombre d'incidents par jour ouvré sur les 6 dernières semaines
             Download Zip icon.png  Téléchargez  Exemple (fichier CSV)
     

Différentes représentations graphiques du nombre d'incidents par semaine

Graphique en entonnoir, bulle informative Graphique en pyramide
Funnel chart - Example 1.png Funnel chart - Example 2.png

Remarques

  • Le widget Funnel Chart nécessite un datasource remontant un rapport, une vue ou un fichier au format .csv, comprenant 2 colonnes (ruptures) Libellé / Valeur.
    Note : Si le datasource comprend plusieurs colonnes, utilisez le Data Transformer pour sélectionner celles souhaitées :
    • Colonne n° 1 : Dimension
    • Colonne n° 2 : Valeurs des éléments de mesure à afficher sur le graphique
  • Il y a autant de sections sur le graphique qu'il y a d'éléments de mesure.
    • Les éléments de mesure sont affichés sur le graphique de haut en bas.
    • La hauteur de chaque section est proportionnelle à la valeur de l'élément.
    • Chaque section est représentée par une couleur précisée dans la légende.
  • En mode Exécution, la légende sert de filtre dynamique des données (clic sur le libellé).

Bonnes pratiques

  • Définissez le goulot d'étranglement de telle sorte que toutes les valeurs ayant un écart significatif soit situées au-dessus du repère.
             Funnel chart - Best practice.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

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.

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.

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.

Charts

Base width : Largeur du sommet du graphique.

  • La valeur 0 affiche un graphe en pyramide.

Neck Width: Largeur du goulot d'étranglement.

  • Toutes les sections situées sous ce repère ont la même largeur.

Neck Height : Hauteur entre la base du graphique et le goulot d'étranglement.

  • La valeur maximale affiche un graphique sur lequel toutes les sections ont la même largeur.

          Funnel chart - Chart priorities.png

AdvancedDashboards_Charts_Stroke

Stroke Color : Couleur du contour des sections du graphique.

Hover Stroke Color : Couleur du contour d'une section lorsqu'elle est survolée avec la souris.

          Apps - widgets Advanced Dashboards - Chart stroke priorities.png

Connector

AdvancedDashboards_Charts_Connector

Dash Size : Épaisseur des pointillés reliant les libellés et les sections du graphique.

Gap Size : Espace entre les pointillés.

Thickness : Largeur des pointillés.

Color : Couleur des pointillés.

Note : La longueur de la chaîne de pointillés peut être modifiée via la propriété Labels Points on the Graph > Connector Length.

          Apps - widgets Advanced Dashboards - Connector priorities.png

Common

AdvancedDashboards_Common_General

Animation : En mode Exécution, indique si le graphique est affiché en mode dynamique (case cochée - les éléments graphiques sont affichés les uns après les autres) ou en mode statique (case non cochée - tous les éléments sont affichés simultanément).
 

AdvancedDashboards_Common_DisplayPrintExportButton

Display Print and Export Button : Indique si la sauvegarde et l'impression du graphique sont possibles (case cochée - les icônes Save icon.png et Print icon.png sont affichées), ou non (case non cochée - aucune icône). Note : Les icônes sont toujours positionnées à la droite du graphique.

  • Save icon.png : Sauvegarde du graphique sous forme d'un fichier .jpg.
  • Print icon.png : Impression du graphique ou sauvegarde sous forme d'un fichier .pdf.
             Apps - widgets Advanced Dashboards - Common display print export buttons.png
AdvancedDashboards_Common_DisplayAreaColor

Display Area Color : Indique si une couleur particulière doit être appliquée au fond du graphique (case cochée - sélectionnez la couleur via la zone Chart Area Color), ou non (case non cochée).

  • La zone de fond du graphique est délimitée par les axes des dimensions et des mesures.
  • Pour appliquer une couleur de fond à la totalité du graphique, utilisez la propriété Theme > Background Color. La couleur de fond définie via la propriété Display Area Color reste prioritaire.
     
Fond du graphique en couleur (case cochée) Fond blanc (case non cochée) Couleur de fond pour la totalité du graphique (propriété Theme)
Apps - widgets Advanced Dashboards - Common display area color on.png Apps - widgets Advanced Dashboards - Common display area color off.png Apps - widgets Advanced Dashboards - Common display area color on - Background theme.png

Title

AdvancedDashboards_Common_DisplayChartTitle

Display Chart Title : Indique si un titre doit être ajouté au graphique (case cochée - saisissez le titre dans la zone Chart Title et définissez le format souhaité), ou non (case non cochée).
         Apps - widgets Advanced Dashboards - Common - Chart title.png

Format d'affichage du titre du graphique : police, couleur de fond et du texte, ...

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

Data Points Labels in the Chart

AdvancedDashboards_Common_DisplayPointLabel_Connector

Connector Length : Longueur de la chaîne de pointillés reliant les libellés et les sections du graphique.

Note : Les propriétés graphiques de la chaîne de pointillés peuvent être modifiées via la section Chart > Connector.
         Apps - widgets Advanced Dashboards - Connector priorities.png

AdvancedDashboards_Common_DisplayPointLabel
AdvancedDashboards_Common_DisplayPointLabel_WithoutPosition

Display Point Label : Indique si les étiquettes des données du graphique doivent être affichées (case cochée - sélectionnez l'information à afficher via la liste Label), ou non (case non cochée).

  • Par défaut : Valeur de l'axe des dimensions, suivie de la valeur de l'axe des mesures.
  • Définissez le format d'affichage : police, couleur de fond et du texte, ...
     

Label (Note : Uniquement lorsque la case Display Point Label est cochée) : Informations affichées sur le graphique.

  • Name : Valeurs de l'axe des dimensions.
  • Value : Valeurs de l'axe des mesures.
  • Cliquez sur x pour revenir à l'option par défaut : affichage des 2 valeurs.
Affichage par défaut Valeurs de l'axe des dimensions

(option Name)

Valeurs de l'axe des mesures

(option Value)

Apps - widgets Advanced Dashboards - Common display label points - Name and value.png Apps - widgets Advanced Dashboards - Common display label points - Name.png Apps - widgets Advanced Dashboards - Common display label points - Value.png

Format d'affichage des étiquettes de données : police, couleur de fond et du texte, ...

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

AdvancedDashboards_Common_DisplayPointLabel_WithoutPositionEnd

Position : Positionnement des étiquettes de données sur le graphique.

  • Inside the Chart : À l'intérieur du graphique
  • Outside the Chart : À l'extérieur du graphique

    Best Practice icon.png  Utilisez cette option lorsque les informations se chevauchent à l'intérieur du graphique. Cela peut libérer de l'espace pour les plus longues étiquettes de données.

À l'intérieur (option Inside) À l'extérieur (option Outside)
Apps - widgets Advanced Dashboards - Common display label point - Inside.png Apps - widgets Advanced Dashboards - Common display label point - Outside.png

Color Palette

AdvancedDashboards_Common_ColorPalette

Chart Color : Palette de couleurs appliquée 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 de la palette est indiqué à côté de son nom (ex : Brown (6), Default (12), EasyVista (7)).
  • La couleur des autres éléments graphiques (titre et étiquettes des axes, titre du graphique, graduations) sont gérées via des propriétés spécifiques.

          Apps - widgets Advanced Dashboards - Common - Chart color palette.png

Legend

AdvancedDashboards_CommonLegend
AdvancedDashboards_CommonLegend_DisplayTitle

Display Legend : Indique si la légende du graphique doit être affichée (case cochée), ou non (case non cochée).
         Apps - widgets Advanced Dashboards - Common display legend.png

  • Chaque légende est constituée de l'intitulé de l'élément de dimension (les libellés sont ceux contenus dans la source de données) précédé d'un bouton.
  • La couleur des boutons est définie par la palette de couleur appliquée au graphique (propriété Common > Color Palette).
  • Définissez le positionnement de la légende via les propriétés Layout, Position, Horizontal, Vertical. Attention : Suivant les options de positionnement sélectionnées, le graphique est automatiquement redimensionné pour permettre l'affichage complet de la légende.
  • 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 sur le graphique.
     

Display Legend Title (Note : Uniquement si la case Display Legend est cochée) : Indique si un titre doit être ajouté au-dessus de la légende du graphique (case cochée), ou non (case non cochée).

          Apps - widgets Advanced Dashboards - Common - Legend title.png

AdvancedDashboards_CommonLegend_DisplayTitleEnd

Layout (Note : Uniquement si la case Display Legend est cochée) : Orientation de la légende du graphique.

  • Horizontal : Étiquettes de légende affichées horizontalement, les unes à côté des autres.
  • Vertical : Étiquettes de légende affichées verticalement, les unes en dessous des autres.
Légende en ligne (option Horizontal) Légende en colonne (option Vertical)
Apps - widgets Advanced Dashboards - Common legend - layout horizontal.png Apps - widgets Advanced Dashboards - Common legend - layout vertical.png

Propriétés pour le positionnement de la légende (Note : Uniquement si la case Display Legend est cochée)

Cliquez pour voir les schémas récapitulatifs

  • Alignement Vertical (Layout = Vertical)

    Apps - widgets Advanced Dashboards - Schema legend position - Layout vertical.png

  • Alignement Horizontal (Layout = Horizontal)

    Apps - widgets Advanced Dashboards - Schema legend position - Layout horizontal.png

Position : Position de la légende par rapport au graphique.

  • Top : En haut du graphique.
  • Bottom : En bas du graphique.
  • Left : À gauche du graphique.
  • Right : À droite du graphique.
     

Horizontal Align (Note : Uniquement si Position = Top ou Bottom) : Position horizontale de la légende du graphique.

  • Left : À gauche du graphique.
  • Center : Au centre du graphique.
  • Right : À droite du graphique.
     

Vertical Align  (Note : Uniquement si Position = Left ou Right) : Position verticale de la légende du graphique.

  • Top : En haut du graphique.
  • Center : En haut du graphique.
  • Bottom : En bas du graphique.

Tooltip

AdvancedDashboards_CommonTooltip

Display Tooltip : Indique si les étiquettes des données doivent être affichées dans une info-bulle au survol du graphique (case cochée - sélectionnez l'information à afficher via la liste Label), ou non (case non cochée).

  • Informations affichées par défaut sur chaque point survolé : Valeur de l'axe des dimensions / Valeur de l'axe des mesures
  • Définissez le format d'affichage via les propriétés ci-dessous.

          Apps - widgets Advanced Dashboards - Common display tooltip on.png

Tooltip Display Mode (Note : Uniquement si la case Display Tooltip est cochée) : Définit les informations affichées au survol de chaque point de données.

  • Single : Valeur de l'axe des dimensions / Valeur de l'axe des mesures
  • Union :  Valeur de l'axe des dimensions / Toutes les valeur de l'axe des mesures
Valeur courante de l'axe des mesures (option Single) Toutes les valeurs de l'axe des mesures (option Union)
Apps - widgets Advanced Dashboards - Common display tooltip on - Single.png Apps - widgets Advanced Dashboards - Common display tooltip on - Union.png

Position (Note : Uniquement si la case Display Tooltip est cochée) : Position de l'info-bulle d'un point de données par rapport au déplacement du curseur de la souris.

  • Float : L'info-bulle se déplace avec le curseur de la souris.
  • Point : L'info-bulle est toujours positionnée au-dessus du point de données, quel que soit l'emplacement du curseur de la souris.

Theme

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

Tags :

Raccourcis

Portail client

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

Powered by XWiki © EasyVista 2022