Utilisation de graphiques dans les communications interactives

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 Graphique vous permet d’ajouter et de configurer les types de graphiques suivants : Circulaire, Colonne, Anneau, Barre, Ligne, Ligne et point, Point, Zone et Quadrant.

Ajouter et configurer un graphique dans une communication interactive

Effectuez les étapes suivantes pour ajouter et configurer un graphique dans une communication interactive :

  1. Appuyez sur Composants dans le sidekick de la communication interactive.

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

    • Canal d’impression : Zone cible ou champ d’image
    • Canal web : Zone de panneau ou cible
  3. Appuyez sur 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 de 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 en fonction du type de canal.

  5. (Canal d’impression uniquement) Dans Paramètres de l’agent, indiquez s’il est obligatoire pour l’agent d’utiliser ce graphique. Si l’option L’agent n’est pas obligatoire pour utiliser ce graphique, l’agent peut appuyer sur l’icône représentant un oeil pour le graphique dans l’onglet Contenu de l’interface utilisateur de l’agent pour afficher ou masquer le graphique.

    chart_agentproperties

  6. Appuyez sur done_icon pour enregistrer les propriétés du graphique.

    Appuyez sur Aperçu pour afficher l’apparence et les données associées au graphique. Appuyez sur Modifier pour reconfigurer les propriétés du graphique.

Configurer les propriétés du graphique

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 de 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 à générer. Les options disponibles sont Circulaire, Colonne, Anneau, Barre, Ligne, Ligne et Point, Point et Aire. Impression et web
Série > Série multiple 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 à 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 pour 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 de modèle de données

Nom de l’élément de collecte de modèle 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 qui ont un sens l’une par rapport à l’autre pour tracer 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 de modèle de données

Élément de collecte de modèle de données de formulaire à tracer sur l’axe Y. Dans le canal d’impression, l’objet de modèle de données de 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 qui ont un sens l’une par rapport à l’autre pour tracer 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 dans 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 Retrait du graphique à gauche de la page. Imprimer
Info-bulle

Format dans lequel l’info-bulle s’affiche lorsque vous pointez sur un point de données dans le graphique du canal web. La valeur par défaut est ${x}(${y}). Selon le type de graphique, lorsque vous pointez la souris sur un point, une barre ou une tranche du graphique, les variables ${x}et ${y} sont remplacées dynamiquement 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 Tooltip vide. Cette option ne s’applique pas aux graphiques en ligne ni en points. Par exemple, voir 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 la 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. Il est recommandé d’utiliser la légende de droite dans le canal d’impression.
  • Rayon interne : Disponible pour les graphiques en anneau pour spécifier le rayon (en pixels) du cercle intérieur du graphique.
  • Couleur de ligne : Cette option est disponible pour les graphiques en courbes, en courbes et en points, ainsi que pour les diagrammes de surface afin de spécifier la couleur de la ligne dans le graphique.
  • Couleur du point : Cette option est disponible pour les graphiques en points et lignes et points afin de spécifier la couleur des points du graphique.
  • Couleur de la zone : Cette option est disponible pour les graphiques à aires pour spécifier la couleur de la zone située sous la ligne du graphique.
  • Point de référence > Type de liaison : Disponible pour les graphiques Quadrant pour spécifier le type de liaison du point de référence. Utilisez le texte statique ou la propriété d’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 quadrant si vous sélectionnez Statication dans la liste déroulante Type de liaison afin de 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 en quadrant si vous sélectionnez Statique dans la liste déroulante Type de liaison afin de spécifier la valeur de l’axe Y pour le 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 Quadrant si vous sélectionnez Objet de modèle de données dans la liste déroulante Type de liaison . Définissez la propriété d’objet de modèle de données de 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 plusieurs séries de Quadrant 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 la série et la valeur définie dans ce champ pour 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 quadrant 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 mappé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 quadrant 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.
    Étiquettes quadrant > Haut gauche : disponibles pour les graphiques quadrant pour spécifier le nom du quadrant supérieur gauche.
  • Étiquettes quadrant > Haut à droite : disponibles pour les graphiques Quadrant pour spécifier le nom du quadrant supérieur droit.
  • Quadrant Labels > Bas droit : Disponible pour les graphiques Quadrant pour spécifier le nom du quadrant inférieur droit.
  • Étiquettes Quadrant > Bas à gauche : Disponible pour les graphiques Quadrant pour spécifier le nom du quadrant inférieur gauche.
Impression et web

Utilisation des fonctions dans le graphique

Vous pouvez configurer un graphique de sorte qu’il utilise des fonctions statistiques pour calculer des valeurs à partir des données source pour un mappage 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

Bien que le composant Graphique soit fourni avec certaines fonctions intégrées, vous pouvez écrire des fonctions personnalisées et les rendre disponibles pour une utilisation dans la configuration du graphique dans le canal web.

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

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

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

​MaximumRenvoie le maximum des valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe.

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

​RangeRenvoie la différence entre le maximum et le minimum des valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe.

​MedianRenvoie la valeur qui sépare les valeurs supérieures et inférieures en deux sur l’axe X ou Y pour une valeur donnée sur l’autre axe.

​MinimumRenvoie le minimum des valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe.

​ModeRenvoie la valeur avec le plus d’occurrences sur l’axe X ou Y pour une valeur donnée sur l’autre axe.

Pour plus d’informations, voir Exemple 2 : Application des fonctions Somme et Fréquence dans un graphique en courbes .

Fonctions personnalisées dans le canal web

En plus d’utiliser les fonctions par défaut dans les graphiques, vous pouvez rédiger des fonctions personnalisées dans JavaScript™ et les rendre disponibles dans la liste des fonctions du composant de graphique du 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, voir Configuration de l’action Envoyer et Utilisation des bibliothèques côté client.

  2. Pour afficher la fonction personnalisée dans la liste déroulante Fonction , dans CRXDe Lite, créez un noeud nt:unstructured dans le dossier des applications avec les propriétés suivantes :

    • Ajoutez la propriété guideComponentType avec la valeur 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 qui apparaît dans la liste déroulante Fonction . Par exemple, Multiplier.

    • Ajoutez la propriété qtip avec une valeur qui sera 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

Dans l’onglet De base, vous définissez le type de graphique, les propriétés du modèle de données de formulaire source qui contiennent 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 à mapper sur le graphique.

Examinons en détail les informations minimales requises dans les propriétés de base, à l’aide d’un relevé de carte généré à l’aide d’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

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 : spécifiez le type de dépense pour l’axe X et le montant de la transaction pour 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 pour 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

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 de l’objet 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 : spécifiez la valeur Rayon interne 150 pour spécifier le rayon (en pixels) du cercle intérieur du 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 : Débit pour le 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

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 "Débit pour AirBnB"

Graphique linéaire sans fonction comportant deux transactions "Débit pour AirBnB"

Fonction Somme

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 est appliquée sur l’axe Y pour additionner les deux débits pour les transactions AirBnB (2050 et 1050) et n’afficher qu’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.

Somme du graphique en courbes

Fonction Fréquence

La fonction Fréquence renvoie le nombre de valeurs sur l’axe Y pour une même valeur sur l’autre axe. Avec l’application de la fonction Fréquence sur l’axe Y (Montant des transactions), le graphique affiche deux occurrences de Débit pour les transactions AirBnB et une occurrence du reste des types de transactions.

Fréquence des graphiques en courbes

Exemple 3 : Graphique Quadrant à plusieurs séries sur le Web

Le graphique trace le montant des transactions effectuées sur une certaine période. Le graphique Quadrant permet de diviser la zone de graphique en quatre sections marquées. Le graphique utilise un point de référence statique pour l’axe X et l’axe Y. Utilisez la fonction 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 ​Quadrantas dans la liste déroulante.

  • Cochez la case Série multiple .

  • Objet de modèle de données : Spécifiez la propriété d’objet de modèle de données pour 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 pour 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.

  • Définissez les libellés de quadrant pour les quadrans supérieur gauche, supérieur droit, inférieur droit et inférieur gauche.

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

Graphiques quadratiques

Sur cette page