Vous consultez actuellement l'aide de la version:

En utilisant des graphiques dans une communication interactive, vous pouvez condenser de grandes quantités d’informations dans un format visuel facile à analyser et à comprendre

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 :

  • Diagramme circulaire
  • Colonne
  • Anneau
  • Barre (Canal web uniquement)
  • Ligne
  • Ligne et point
  • Point
  • Zone

Ajouter et configurer le graphique dans une communication interactive

Effectuez les étapes suivantes pour ajouter un graphique à une communication interactive : 

  1. À partir des composants de la barre latérale AEM, glissez-déposez le composant graphique dans l’un des canaux d’impression ou web d’une communication interactive :

    • Canal d’impression : zone Cible  et champ Image
    • Canal web : panneau et zone Cible

    Le composant Graphique déposé crée un espace réservé pour un graphique.  

  2. Appuyez sur le composant graphique dans l’éditeur de communication interactive et sélectionnez Configurer () dans la barre d’outils Composant.

    La barre latérale Propriétés s’affiche avec les propriétés de base du graphique actives.

    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

  3. Configurez les propriétés de base du graphique pour le canal d’impression et le canal web. Outre les propriétés communes, il existe des propriétés spécifiques au canal d’impression, au canal web et au type de graphique.  

    • Nom* : nom de l’objet graphique. Le nom du graphique que vous spécifiez ici n’apparaît pas dans la sortie graphique mais est utilisé dans les règles pour faire référence au graphique. 
    • Type de graphique : spécifiez le type de graphique : Circulaire, Colonne, Anneau, Ligne, Ligne et Point, Point, Aire.  
    • Masquer l’objet : sélectionnez cette option pour masquer le graphique dans la sortie finale.   
    • Indiquez les éléments suivant pour l’axe X et l’axe Y :
      • Titre : spécifiez les titres des axes X et Y à afficher dans la communication interactive. 
      • Objet de modèle de données* : recherchez et sélectionnez les objets de modèle de données des axes X et Y du graphique à partir du modèle de données de formulaire spécifié lors de la création de la communication interactive. 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 pour tracer les axes X et Y d’un graphique.   
      • Fonction : pour utiliser les fonctions statistiques de calcul des valeurs sur l’axe, sélectionnez la fonction de l’axe X/Y. Pour plus d’informations sur les fonctions, consultez la section Utilisation des fonctions dans le graphique et Exemple 2 : applications des fonctions somme et moyenne dans un graphique en ligne.

    Remarque :

    Pour le canal d’impression, sur l’axe X, l’objet de modèle de données que vous reliez doit être de type Nombre, Chaîne ou Date. Sur l’axe Y, l’objet de modèle de données que vous liez doit être de type Nombre. Il est recommandé d’utiliser la légende de droite dans le canal d’impression.

    Pour plus d’informations sur les propriétés de graphique, consultez la section Propriétés de base dans les graphiques

  4. (Canal d’impression uniquement) Dans les Paramètres de l’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 peut cliquer sur 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
  5. Dans la barre latérale Propriétés, appuyez sur .

    Aperçu permettant de visualiser l’apparence et les données du graphique. Revenez à l’étape précédente pour reconfigurer les propriétés du graphique, si nécessaire.

  6. Revenez à l’étape précédente pour apporter d’autres modifications à la communication interactive.

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

Dans l’onglet Réglages de base, vous définissez le type de graphique, les propriétés de modèle de données de formulaire 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 à mapper 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 de crédit 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.

Pour ce faire, vous devez spécifier :

  • Type de graphique - dans cet exemple, Colonne pour le canal d’impression et Anneau pour le canal web
  • Objets de modèle de données comme source des axes X et Y du graphique - dans cet exemple, montant de la transaction pour l’axe X et nom des dépenses pour l’axe Y
  • Titre pour les axes X et Y (pour le graphique de type Colonne dans le canal d’impression uniquement dans cet exemple) - dans cet exemple, Montant ($) pour l’axe X et Dépenses pour l’axe Y.
  • Orientation du libellé (pour le graphique de type Colonne dans le canal d’impression uniquement dans cet exemple) - dans cet exemple, Incliner à gauche
  • Info-bulle à afficher au passage de la souris sur une dépense (canal web seulement) - dans cet exemple ${x} : $ ${y}, qui s’affiche comme [Libellé de dépense : Montant $] (Exemple : visite d’un parc d’attractions : 315 $)
Graphique à colonnes dans l’impression d’une communication interactive
Graphique à colonnes dans l’impression d’une communication interactive

A. Axe Y - quantité extraite de la propriété de modèle de données de formulaire et propriété du titre définie sur Montant ($) B. Orientation du libellé de l’axe X définie sur incliner à gauche C. Axe X - description de la dépense extraite de la propriété de modèle de données de formulaire et propriété du titre définie sur Dépense 
Graphique en anneau dans la sortie web d’une communication interactive
Graphique en anneau dans la sortie web d’une communication interactive

A. La propriété Rayon interne de l’anneau est définie B. La propriété Afficher la légende est sélectionnée et la propriété Position de la légende est définie sur Droite C. L’info-bulle affiche le détail de l’élément au passage du curseur - l’info-bulle est définie sur ${x} : $ ${y} 

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 en ligne sans fonction avec trois transactions «Bed and Breakfast»
Graphique en ligne sans fonction avec trois transactions «Bed and Breakfast»

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 s’applique à l’axe Y et additionne le montant des trois transactions Bed and Breakfast (99,45 $, 78 $ et 12 $) pour afficher une seule transaction (189,45 $).

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.  

creditcardchartsumfunctioncopy

Fonction Fréquence

La fonction Fréquence renvoie le nombre de valeurs sur l’axe X ou Y pour une même valeur sur l’autre axe. Grâce à l’utilisation de la fonction Fréquence sur l’axe Y (Montant/MontantTrans), le graphique affiche trois occurrences de transactions Bed and Breakfast et une occurrence du reste des types de transactions.

creditcardchartfrequencyfunctioncopy

Propriétés de base dans les graphiques

Dans l’onglet Réglages de base, vous pouvez configurer les propriétés suivantes :

Nom

Identifiant de l’élément graphique. Le nom n’est pas visible sur le graphique, mais il est utile lors de la référence à l’élément à partir d’autres composants, scripts et expressions SOM.

Titre (canal d’impression uniquement)

Indique le titre du graphique.

Type de graphique

Spécifie le type de graphique à générer. Les options disponibles sont Circulaire, Colonne, Anneau, Barre (canal web uniquement), Colonne, Ligne, Ligne et point, Point et Aire. Pour plus d’informations, voir Exemple 1 : sortie du graphique sur papier et sur le web.

Axe X > Titre

Spécifie le titre de l’axe X.

Axe X > Objet du modèle de données*

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

Axe X > Fonction

Spécifie la fonction statistique/personnalisée à utiliser pour calculer les valeurs sur l’axe X.Pour plus d’informations sur les fonctions, consultez la section Utilisation des fonctions dans le graphique et Exemple 2 : applications des fonctions somme et moyenne dans un graphique en ligne.

Axe X > Orientation du libellé

Orientation du libellé sur le graphique dans le canal d’impression. Si vous choisissez Rotation personnalisée comme orientation du libellé, le champ Angle de rotation personnalisé (degrés) apparaît. Dans le champ Angle de rotation personnalisée (degrés), vous pouvez choisir l’angle de rotation par étapes de 15 degrés.

Axe Y > Titre

Spécifie le titre de l’axe Y.

Axe Y > Objet du modèle de données*

Indique l’é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.

Axe Y > Fonction

Spécifie la fonction statistique/personnalisée à utiliser pour calculer les valeurs sur l’axe Y.Pour plus d’informations sur les fonctions, consultez la section Utilisation des fonctions dans le graphique et Exemple 2 : applications des fonctions somme et moyenne dans un graphique en ligne.

Affichage de 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.

Hauteur (canal d’impression uniquement)

Hauteur du graphique en pixels.

Largeur (canal d’impression uniquement)

Largeur du graphique en pixels.

Remarque :

Vous pouvez contrôler la largeur du graphique dans le canal web à l’aide du calque de style ou en appliquant un thème.

Info-bulle (canal web uniquement)

Spécifie le 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, 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 son champ 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.

Classe CSS (Canal web uniquement)

Indiquez le nom d’une classe CSS dans le champ de classe CSS pour appliquer un style personnalisé au graphique.  

Saut de page obligatoire avant (canal d’impression uniquement)

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.

Saut de page obligatoire après (canal d’impression uniquement)

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.

Mise en retrait (canal d’impression uniquement)

Spécifiez la mise en retrait du graphique depuis le côté gauche de la page.

Configurations spécifiques au graphique

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

  • 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 en courbes, en points, en lignes et en points, ou en aires pour spécifier la valeur hexadécimale de la couleur de la ligne dans le graphique.
  • Couleur du point : disponible pour les graphiques en points, et lignes et points, pour spécifier la valeur hexadécimale de la couleur pour les points dans le graphique.
  • Couleur de zone : disponible pour les graphiques à aires pour spécifier la valeur hexadécimale de la couleur pour la zone située sous la ligne dans le graphique.

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.

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

FunctionChart

Remarque :

Vous pouvez utiliser les fonctions pour calculer les valeurs pour l’axe X ou l’axe Y dans un graphique.

Fonctions par défaut

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édiane

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 valeur donnée 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

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, consultez Configuration de l’action d’envoi et Utilisation de 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 (non structuré) dans le dossier d’applications avec les propriétés suivantes :
    • Ajoutez la propriété guideComponentType dotée de la valeur fd/af/reducer. (obligatoire)
    • Définissez la valeur sur 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 de la 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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne