Widget Tag Cloud

Modifié le 28/05/2022 10:53

Apps - Widget - Tag Cloud 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 graphiquement les valeurs textuelles des éléments de dimension sous la forme d'un nuage de mots (ou tag cloud). L'importance d'un mot clé du nuage est déterminée par sa fréquence (nombre d'occurrences dans la source de données) et est mise en évidence par la taille et la couleur de la police de caractères.

De nombreuses propriétés permettent de mettre en forme le graphique : couleur des mots, inclinaison des mots, police, ...

Exemples

Les données du fichier CSV

  • la dimension = Localisation
  • la mesure = Nombre de matériels
  • les éléments affichés : Les mots correspondant aux localisations, formatés graphiquement suivant l'importance du nombre de matériels
             Download Zip icon.png  Téléchargez  Exemple (fichier CSV)
     

Différentes représentations graphiques du nuage de mots Nombre de matériels par localisation

Affichage en spirale, angles de rotation et bulle informative Affichage en rectangle, mots en majuscule, valeur sélectionnée = 230
Tag cloud - Example 1.png Tag cloud - Example 2.png

Remarques

  • Le widget Tag Cloud 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 les 2 colonnes souhaitées :
    • Colonne n° 1 : Dimension
    • Colonne n° 2 : Valeurs des éléments de mesure à afficher sur le graphique
  • La taille de la police de caractères de chaque mot est proportionnelle à la valeur attribuée à l'élément de dimension dans le datasource.
  • Chaque mot est affiché dans la couleur associé à sa valeur sur l'axe des légendes.
  • En mode Exécution :
    • Une bulle informative est affichée en survolant un mot.
    • Un clic sur une valeur de l'axe des légendes affiche en noir tous les mots égaux à cette valeur.

Attention

  • Le nuage de mots affiche des données textuelles. Si les mots clés à visualiser contiennent des nombres, ceux-ci sont interprétés comme du texte, et non comme des valeurs Integer ou Float.

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

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.

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

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

Charts

Position : Type d'affichage des mots.

  • Spiral : affichage en forme de spirale.
  • Rectangle : affichage en forme de rectangle.
Spirale Rectangle
Chart - Position spiral.png Chart - Position rectangle.png

Color Range : Indique si l'axe des légendes doit être affiché sous le graphique (case cochée) ou non (case non cochée).

  • Les couleurs de chaque tranche de valeurs de l'axe sont déterminées par le thème.
             Chart - Color range.png

Series Angle : Série de valeurs indiquant les angles de rotation des mots.

  • Les valeurs autorisées vont de -180 à 180.
  • La valeur 0 affiche les mots horizontalement (aucune rotation).
  • Les valeurs -180 et 180 afichent les mots retournés horizontalement (rotation de 180°).
             Chart - Series angle 1.png
  • Plusieurs valeurs peuvent être renseignées. Elles sont attribuées de façon aléatoire aux mots.
             Chart - Series angle 2.png

Text Spacing : Espace, en pixels, entre les mots.

Espace : 0 Espace : 10
Chart - Text spacing 0.png Chart - Text spacing 10.png

Text Appearance : Type de casse appliqué aux mots.

  • Normal : affichage en caractères standard.
  • Uppercase : affichage en lettres majuscules.
Normal Uppercase
Chart - Appearence normal.png Chart - Appearence uppercase.png
Font Family (Inherit) (1) Police de caractères des mots, sélectionnée via Select Font Chart - Format.png
Size (2) Taille de la police de caractères des mots
Style (Inherit) (3) Attributs de caractères des mots (Gras / Italique / Souligné)
Text Color (Inherit) (4) Couleur des mots.

Common

Measure Data Type : Définit le format d'affichage des valeurs sur le nuage de mots.

  • Integer : Affiche des valeurs entières, arrondies à la décimale inférieure ou supérieure ;
             Example documentation icon FR.png  152200,10 ==> 152200
  • Float : Affiche des valeurs avec 2 décimales par défaut.
    • Pour modifier le nombre de décimales par défaut, décochez la case Default Float Precision et sélectionnez la valeur souhaitée via la propriété Float Precision.
               Example documentation icon FR.png  152200 ==> 152200,00
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

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

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 :
Powered by XWiki © EasyVista 2022