Utilisation de graphiques dans les communications interactives using-charts-in-interactive-communications

Un diagramme ou un graphique est une représentation visuelle des données. Elle concentre une grande quantité d’informations dans un format visuel simple à interpréter et permet aux destinataires de la communication interactive de mieux visualiser, interpréter et analyser les données complexes.

Lors de la création d’une communication interactive, vous pouvez ajouter des graphiques pour représenter visuellement des données bidimensionnelles à partir du modèle de données de formulaire de la communication interactive. Le composant de graphique vous permet d’ajouter et de configurer les types de graphiques suivants : circulaire, à colonnes, en anneau, à barres, linéaire, linéaire et à points, à points, en aires et à quadrants.

Ajouter et configurer un graphique dans une communication interactive add-and-configure-chart-in-an-interactive-communication

Pour ajouter et configurer un graphique dans une communication interactive, procédez comme suit :

  1. Sélectionnez Composants dans le sidekick de la communication interactive.

  2. Faites glisser, puis déposez le composant de Graphique sur l’un des composants suivants :

    • Canal d’impression : zone cible et champ Image
    • Canal web : panneau ou zone cible
  3. Sélectionnez le composant de graphique dans l’éditeur de communication interactive et sélectionnez Configurer ( configure_icon ) dans la barre d’outils Composant.

    Les propriétés du graphique s’affichent dans le volet gauche.

    Propriétés de base d’un graphique en ligne dans le canal d’impression

    Propriétés de base d’un graphique en ligne dans le canal d’impression

    Propriétés de base d’un graphique en ligne dans le canal web

    Propriétés de base d’un graphique en ligne dans le canal web

  4. Configurez les propriétés du graphique selon le type de canal.

  5. (Canal d’impression uniquement) Dans les Paramètres d’agent, indiquez si l’utilisation de ce graphique est obligatoire pour l’agent. Si l’option L’utilisation de ce graphique est obligatoire pour l’agent n’est pas sélectionnée, l’agent ou l’agente peut sélectionner l’icône du graphique représentant un œil dans l’onglet Contenu de l’interface utilisateur de l’agent pour afficher/masquer le graphique.

    chart_agentproperties

  6. Sélectionnez done_icon pour enregistrer les propriétés du graphique.

    Sélectionnez Prévisualisation pour afficher l’aspect et les données associées au graphique. Sélectionnez Modifier pour reconfigurer les propriétés du graphique.

Configurer les propriétés du graphique configure-chart-properties

Configurez les propriétés suivantes lors de la création de graphiques pour les canaux d’impression et web :

Champ
Description
Type de canal
Nom
Identifiant de l’élément graphique. Le nom du graphique spécifié dans ce champ n’est pas visible sur le graphique. Il est utilisé lors de la référence à l’élément à partir d’autres composants, scripts et expressions SOM.
Impression et web
Type de graphique
Type de graphique que vous souhaitez générer. Les options disponibles sont les suivantes : circulaire, en anneau, à barres, à colonnes, linéaire, linéaire et à points, à points et en aires.
Impression et web
Série > Plusieurs séries
Sélectionnez cette option pour ajouter plusieurs séries pour les éléments de collecte de modèle de données de formulaire tracés sur l’axe X et l’axe Y.
Impression et web
Série > Objet de modèle de données
Nom de l’élément de collecte de modèle de données de formulaire pour ajouter plusieurs séries au graphique.
Choisissez une propriété d’objet de modèle de données de formulaire parent pour les propriétés tracées sur l’axe X et l’axe Y afin de former une série significative. L’objet de modèle de données que vous liez doit être de type Nombre, Chaîne ou Date.
Impression et web
Afficher les éléments empilés
Choisissez d’empiler les valeurs de chaque série les unes sur les autres.
Impression et web
Axe X > Titre
Titre de l’axe X.
Impression et web
Axe X > Objet du modèle de données

Nom de l’élément de collection de modèles de données de formulaire à tracer sur l’axe X.

Choisissez deux propriétés de type collection/tableau du même objet de modèle de données parent significatives l’une par rapport à l’autre à tracer sur les axes X et Y d’un graphique. L’objet de modèle de données que vous liez doit être de type Nombre, Chaîne ou Date.

Impression et web
Axe Y > Titre
Titre de l’axe Y.
Impression et web
Axe Y > Objet du modèle de données

Élément de collection de modèles de données de formulaire à tracer sur l’axe Y. Dans le canal d’impression, l’objet de modèle de données pour l’axe Y doit être de type Nombre.

Choisissez deux propriétés de type collection/tableau du même objet de modèle de données parent significatives l’une par rapport à l’autre à tracer sur les axes X et Y d’un graphique.

Impression et web
Axe Y > Fonction
Fonction statistique/personnalisée à utiliser pour calculer les valeurs sur l’axe Y.
Impression et web
Masquer l’objet
Sélectionnez cette option pour masquer le graphique au niveau de la sortie finale.
Impression et web
Titre
Titre du graphique.
Imprimer
Hauteur
Hauteur du graphique en pixels.
Imprimer
Largeur
Largeur du graphique en pixels. Vous pouvez contrôler la largeur du graphique dans le canal web à l’aide du calque de style ou en appliquant un thème.
Imprimer
Saut de page obligatoire avant
Sélectionnez cette option pour ajouter un saut de page obligatoire avant le graphique et pour placer le graphique en haut d’une nouvelle page.
Imprimer
Saut de page obligatoire après
Sélectionnez cette option pour ajouter un saut de page obligatoire après le graphique et pour placer le contenu suivant le graphique en haut d’une nouvelle page.
Imprimer
Indentation
Mise en retrait du graphique depuis le côté gauche de la page.
Imprimer
Info-bulle

Format dans lequel l’info-bulle s’affiche lorsque le curseur de la souris survole un point de données du graphique dans le canal web. La valeur par défaut est ${x}(${y}). En fonction du type de graphique, lorsque vous passez le curseur sur un point, une barre ou une tranche du graphique, les variables ${x} et ${y} sont remplacées de manière dynamique par les valeurs correspondantes sur l’axe X et l’axe Y et elles s’affichent dans l’info-bulle.

Pour désactiver l’info-bulle, laissez le champ Info-bulle vide. Cette option ne s’applique pas aux graphiques en ligne ni en points. Par exemple, consultez Exemple 1 : sortie du graphique sur papier et sur le Web.

Web
Configurations spécifiques au graphique

En plus des configurations courantes, la configuration spécifique au graphique suivante est disponible :

  • Afficher une légende : affiche une légende pour le graphique circulaire ou en anneau lorsqu’il est activé.
  • Position de la légende : spécifie la position de la légende par rapport au graphique. Les options disponibles sont Droite, Gauche, Haut et Bas. Utilisez la légende de droite dans le canal d’impression.
  • Rayon interne  : disponible pour les graphiques en anneau pour indiquer le rayon (en pixels) du cercle intérieur dans le graphique.
  • Couleur de la ligne  : disponible pour les graphiques linéaires, linéaires et à points, ou en aires pour spécifier la couleur de la ligne dans le graphique.
  • Couleur du point  : disponible pour les graphiques à points et linéaires et à points, pour spécifier la couleur des points dans le graphique.
  • Couleur de zone  : disponible pour les graphiques en aires pour spécifier la couleur pour la zone située sous la ligne dans le graphique.
  • Point de référence > Type de liaison : disponible pour les graphiques a quadrants pour spécifier le type de liaison du point de référence. Utilisez le texte statique ou la propriété de l’objet de modèle de données pour définir la valeur du point de référence.
  • Point de référence > Axe X : disponible pour les graphiques à quadrants si vous sélectionnez Statique dans la liste déroulante Type de liaison pour spécifier la valeur de l’axe X pour le point de référence.
  • Point de référence > Axe Y : disponible pour les graphiques à quadrants si vous sélectionnez Statique dans la liste déroulante Type de liaison pour spécifier la valeur de l’axe Y du point de référence.
  • Point de référence > Objet de modèle de données pour les séries : disponible pour plusieurs séries de graphiques à quadrants si vous sélectionnez Objet de modèle de données dans la liste déroulante Type de liaison. Définissez la propriété de l’objet de modèle de données du formulaire pour identifier la série pour le point de référence.
  • Point de référence > Valeur d’objet de modèle de données pour les séries : disponible pour les graphiques à quadrants à séries multiples si vous sélectionnez Objet de modèle de données dans la liste déroulante Type de liaison. Utilisez la propriété de l’objet de modèle de données du formulaire pour la série et la valeur définie dans ce champ afin d’identifier la série pour le point de référence.
  • Point de référence > Objet de modèle de données pour le point de référence : disponible pour les graphiques à quadrants si vous sélectionnez Objet de modèle de données dans la liste déroulante Type de liaison. Définissez une propriété d’objet de modèle de données de formulaire qui est apparentée aux propriétés tracées sur l’axe X et l’axe Y. En outre, pour les séries multiples, définissez une propriété d’objet de modèle de données qui est une entité enfant de la propriété d’objet de modèle de données définie pour la série.
  • Point de référence > Valeur d’objet de modèle de données pour le point de référence : disponible pour les graphiques à quadrants si vous sélectionnez Objet de modèle de données dans la liste déroulante Type de liaison. Utilisez la propriété d’objet de modèle de données de formulaire pour le point de référence et la valeur définie dans ce champ pour identifier le point de référence du graphique.
    Libellés du quadrant > En haut à gauche : disponible pour les graphiques à quadrants afin de spécifier le nom du quadrant supérieur gauche.
  • Libellés du quadrant > En haut à droite : disponible pour les graphiques à quadrants afin de spécifier le nom du quadrant supérieur droit.
  • Libellés du quadrant > En bas à droite : disponible pour les graphiques à quadrants afin de spécifier le nom du quadrant inférieur droit.
  • Libellés du quadrant > En bas à gauche : disponible pour les graphiques à quadrants afin de spécifier le nom du quadrant inférieur gauche.
Impression et web

Utiliser des fonctions dans le graphique use-functions-in-chart

Vous pouvez configurer un graphique pour qu’il utilise des fonctions statistiques afin de calculer des valeurs à partir des données source destinées au tracé sur le graphique. L’application de fonctions dans un graphique vous permet de tracer des données qui ne sont pas directement fournies par le modèle de données de formulaire.

Fonctions dans les graphiques

Outre les fonctions intégrées du composant de graphique, vous pouvez rédiger des fonctions personnalisées et les rendre disponibles pour qu’elles soient utilisées dans la configuration du graphique dans le canal web.

Les fonctions suivantes sont disponibles par défaut avec le composant de graphique :

Moyenne renvoie la moyenne des valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe.

Somme renvoie la somme de toutes les valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe.

Maximum renvoie le nombre maximal de valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe.

Fréquence renvoie le nombre de valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe.

Plage renvoie la différence entre le nombre maximal et minimal des valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe.

Médian renvoie la valeur qui sépare les valeurs les plus élevées et les valeurs les plus basses de la moitié sur l’axe X ou Y pour une même valeur sur l’autre axe.

Minimum renvoie le nombre minimal de valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe.

Mode renvoie la valeur avec le plus d’occurrences sur l’axe X ou Y pour une même valeur sur l’autre axe.

Pour plus d’informations, consultez la section Exemple 2 : application des fonctions Somme et Fréquence dans un graphique linéaire.

Fonctions personnalisées dans le canal web customfunctionsweb

Outre l’utilisation des fonctions par défaut dans les graphiques, vous pouvez créer des fonctions personnalisées en JavaScript™ et les rendre disponibles dans la liste des fonctions du composant de graphique pour le canal web.

Une fonction prend un tableau ou des valeurs et un nom de catégorie comme entrées et renvoie une valeur. Par exemple :

Multiply(valueArray, category) {
 var val = 1;
 _.each(valueArray, function(value) {
 val = val * value;
 });
 return val;
}

Une fois que vous avez rédigé une fonction personnalisée, procédez comme suit pour la rendre disponible pour une utilisation dans la configuration du graphique :

  1. Ajoutez la fonction personnalisée à la bibliothèque client associée à la communication interactive concernée. Pour plus d’informations, consultez les sections Configurer l’action d’envoi et Utiliser les bibliothèques côté client.

  2. Pour afficher la fonction personnalisée dans le menu déroulant Fonction dans CRXDe Lite, créez un nœud nt:unstructured dans le dossier d’applications avec les propriétés suivantes :

    • Ajoutez la propriété guideComponentType avec une valeur définie sur fd/af/reducer. (mandatory)

    • Ajoutez la propriété value à un nom complet de la fonction JavaScript™ personnalisée. (obligatoire) et définissez sa valeur sur le nom de la fonction personnalisée, telle que Multiplier.

    • Ajoutez la propriété jcr:description avec la valeur que vous souhaitez afficher comme nom de la fonction personnalisée apparaissant dans le menu déroulant Fonction. Par exemple, Multiplier.

    • Ajoutez la propriété qtip avec une valeur représentant une brève description de la fonction personnalisée. Elle s’affiche sous forme d’info-bulle lorsque le curseur est placé sur le nom de la fonction dans la liste déroulante.

  3. Cliquez sur Enregistrer tout pour enregistrer la configuration.

Cette fonctionnalité est désormais disponible dans le graphique.

Exemple 1 : sortie du graphique sur papier et sur le web chartoutputprintweb

Dans l’onglet Réglages de base, définissez le type de graphique, les propriétés de modèle de données du formulaire source contenant des données, les libellés à mapper sur l’axe X et l’axe Y du graphique et éventuellement la fonction statistique pour calculer les valeurs à tracer sur le graphique.

Examinons en détail les informations minimales requises de ces propriétés de base à l’aide d’un relevé de carte généré via une communication interactive. Imaginons que vous souhaitez générer un graphique pour décrire le montant total des différentes dépenses dans le relevé. Vous souhaitez utiliser différents types de graphiques pour l’impression et la sortie web de la communication interactive.

Graphique à colonnes pour l’impression columnchartprint

Pour ce faire, spécifiez les propriétés suivantes :

  • Nom  : indiquez le nom du graphique.
  • Type de graphique  : sélectionnez Colonne dans la liste déroulante.
  • Titre  : indiquez le type de dépense à l’axe X et le montant de la transaction à l’axe Y.
  • Objets de modèle de données  : sélectionnez les propriétés de l’objet de modèle de données afin de créer des liaisons de données pour l’axe X (Type de dépense) et l’axe Y (Montant de la transaction).

Graphique à colonnes dans le canal d’impression d’une communication interactive

Graphique à colonnes dans le canal d’impression d’une communication interactive

Graphique en anneau pour le Web donutchartweb

Pour ce faire, spécifiez les propriétés suivantes :

  • Nom  : indiquez le nom du graphique.
  • Type de graphique  : sélectionnez Anneau dans la liste déroulante.
  • Objets de modèle de données  : sélectionnez les propriétés des objets de modèle de données pour créer des liaisons de données pour l’axe X (Type de dépense) et l’axe Y (Montant de la transaction).
  • Rayon interne  : définissez la valeur du rayon interne sur 150 pour indiquer le rayon (en pixels) du cercle intérieur dans le graphique.
  • Info-bulle  : utilisez le format par défaut ${x}(${y}) pour afficher l’info-bulle. L’info-bulle s’affiche comme suit : type de dépense (montant de la transaction). Exemple : « Debit for Bitcoin(10000) ».

Graphique en anneau dans le canal web d’une communication interactive

Graphique en anneau dans le canal web d’une communication interactive

Exemple 2 : application des fonctions Somme et Fréquence dans un graphique en ligne applicationsumfrequency

L’application de fonctions dans un graphique vous permet de tracer des données qui ne sont pas directement fournies par le modèle de données de formulaire. Ici, nous utilisons un exemple de relevé de carte de crédit pour comprendre comment les fonctions Somme et Fréquence peuvent être appliquées au graphique.

Graphique linéaire sans fonction comportant deux transactions « Debit for AirBnB »

Graphique linéaire sans fonction comportant deux transactions « Debit for AirBnB »

Fonction Somme sum-function

Vous pouvez appliquer la fonction Somme pour additionner des valeurs de plusieurs instances de la même propriété Data et ne l’afficher qu’une seule fois. Par exemple, dans le graphique suivant, la fonction Somme s’applique à l’axe Y et additionne le montant des deux transactions « Debit for AirBnB » (2050 et 1050) pour afficher une seule transaction (3100).

La fonction Somme peut rendre le graphique plus utile si vous souhaitez assembler et afficher la somme de plusieurs instances de la même propriété Data.

Graphique linéaire avec fonction Somme

Fonction Fréquence frequency-function

La fonction Fréquence renvoie le nombre de valeurs sur l’axe Y pour une même valeur sur l’autre axe. Grâce à l’utilisation de la fonction Fréquence sur l’axe Y (Montant de la transaction), le graphique affiche deux occurrences de transactions « Debit for AirBnB » et une occurrence du reste des types de transactions.

Graphique linéaire avec fonction Fréquence

Exemple 3 : graphique à quadrants multi-séries dans le Web example-multi-series-quadrant-chart-in-web

Le graphique représente le montant des transactions effectuées au cours dʼune période donnée. Le graphique à quadrants permet de diviser le graphique en quatre sections identifiables. Le graphique utilise un point de référence statique pour l’axe X et l’axe Y. Utilisez la fonctionnalité de séries multiples pour séparer les données en fonction du nom de la banque.

Pour ce faire, spécifiez les propriétés suivantes :

  • Nom : indiquez le nom du graphique.

  • Type de graphique : sélectionnez Quadrant dans la liste déroulante.

  • Cochez la case Séries multiples.

  • Objet de modèle de données: spécifiez la propriété d’objet de modèle de données de la série. La propriété de l’objet de modèle de données pour le nom de la banque est un parent des propriétés de l’objet de modèle de données mappées sur l’axe X et l’axe Y.

  • Objets de modèle de données : sélectionnez les propriétés de l’objet de modèle de données afin de créer des liaisons de données pour l’axe X (Date de transaction) et l’axe Y (Montant de transaction).

  • Dans la section Point de référence, sélectionnez Statique comme type de liaison.

  • Spécifiez les valeurs des points de référence de l’axe X et de l’axe Y.

  • Indiquez les libellés des quadrants supérieur gauche, supérieur droit, inférieur droit et inférieur gauche.

  • Cochez la case Afficher les légendes pour afficher les codes couleur des noms de banque.

Graphiques à quadrants

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2