Un diagramme ou un graphique est une représentation visuelle des données. Elle vous permet de concentrer une grande quantité d’informations dans un format vidéo simples à interpréter, ce qui vous permet de mieux visualiser, interpréter et analyser les données complexes. 

Le module complémentaire AEM Forms propose un composant de graphique prêt à l’emploi. Vous pouvez l’utiliser dans vos formulaires et documents adaptatifs pour rendre une représentation visuelle des données bidimensionnelles dans les panneaux et tableaux répétitifs. Le composant de graphique vous permet d’ajouter et de configurer les types de graphiques suivants :

  • Diagramme circulaire
  • Anneau
  • Barre
  • Colonne
  • Ligne
  • Ligne et point
  • Point
  • Zone
Le composant de graphique gère et fournit des fonctions statistiques intégrées (somme, moyenne, maximum, minimum, mode, médiane, plage et fréquence) pour calculer et faire correspondre les valeurs dans un graphique. Outre les fonctions disponibles prêtes à l’emploi, vous pouvez rédiger vos propres fonctions personnalisées et les rendre disponibles pour qu’elles soient utilisées dans les graphiques.
 
À présent, étudions de quelle façon ajouter et configurer le composant de graphique.

Ajout d’un graphique

Le composant de graphique est disponible dans la zone latérale d’AEM, par défaut. Vous pouvez faire glisser le composant de graphique de la zone latérale d’AEM vers le formulaire ou document adaptatif en mode création. Lorsque vous déposez le composant, il crée un espace réservé pour un graphique.

Configuration du graphique

Remarque :

Avant de configurer le graphique, assurez-vous que la ligne du tableau ou du panneau pour laquelle vous configurez le graphique est définie sur répétitif. Vous pouvez spécifier les valeurs minimale et maximale pour la ligne du tableau ou panneau répétitive dans l’onglet Paramètres de Répétition de leur boîte de dialogue Modifier le composant

Pour configurer le graphique, cliquez avec le bouton droit de la souris sur le composant de graphique et cliquez sur Modifier pour ouvrir la boîte de dialogue Modifier le graphique. La boîte de dialogue contient les options Titre et texte, Configuration, Avancées et les onglets Style qui vous permettent de configurer le graphique.

Réglages de base :

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

Propriétés configurables de graphique

Nom de l’élément

Identifiant de l’élément graphique dans la structure de contenu JCR. Il 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.

Type de graphique

Spécifie le type de graphique à générer. Les options disponibles sont Circulaire, Anneau, Barre, Colonne, Ligne, Ligne et point, Point et Aire. Dans cet exemple, le type de graphique est Colonne.

Répétition du nom de la ligne de la source de données

Indique le nom de l’élément de la ligne du tableau ou du panneau répétitif d’où les données sont référencées. Dans cet exemple, statementDetails est le nom de l’élément de la ligne répétitive dans le tableau des détails de l’instruction.

Axe X > Titre

Spécifie le titre de l’axe X. Dans cet exemple, le titre de l’axe X est Catégorie.

Axe X > Champ

Spécifie le nom de l’élément du champ (ou d’une cellule d’un tableau) à mapper sur l’axe X. Dans l’exemple, les catégories sont configurées sur l’axe X.Le nom d’élément de la cellule du tableau dans la colonne Catégorie de l’exemple de tableau est Catégorie.

Axe X > Utiliser la fonction

Spécifie la fonction statistique à utiliser pour calculer les valeurs sur l’axe X. Dans l’exemple, l’option sélectionnée est Aucun. Pour plus d’informations sur les fonctions, voir la section Utiliser les fonctions dans le graphique.

Axe Y > Titre

Spécifie le titre de l’axe Y. Dans cet exemple, le titre de l’axe Y est Frais.

Axe Y > Champ

Spécifie le nom de l’élément du champ (ou de la cellule d’un tableau) à mapper sur l’axe Y. Dans l’exemple, configurez la quantité sur l’axe Y.Le nom de l’élément pour la cellule du tableau dans la colonne Montant de l’exemple de tableau est montant.

Axe Y > Utiliser la fonction

Spécifie la fonction statistique à utiliser pour calculer les valeurs sur l’axe Y. Dans cet exemple, le montant dépensé dans chaque catégorie est ajouté et la valeur calculée est mappée sur l’axe Y. Par conséquent, sélectionnez Somme dans la liste déroulante Utiliser la fonction. Pour plus d’informations sur les fonctions, voir la section Utiliser les fonctions dans le graphique.

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.

Affichage de la légende

Affichez une légende pour le graphique, lorsque l’option est activée.

Info-bulle

Spécifie le format dans lequel l’info-bulle s’affiche lorsque le pointeur de la souris survole un point de données du graphique. 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 dans le 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. Comme indiqué dans l’exemple ci-dessous, l’info-bulle s’affiche commeRetail Stores(5870) (Revendeurs) lorsque vous passez le curseur de la souris sur la colonne Retails Stores

Pour désactiver l’info-bulle, laissez son champ vide . Cette option ne s’applique pas aux graphiques en courbes ni en points.

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.

Classe CSS

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

Configuration

Dans l’onglet Réglages de base, vous définissez le type de graphique, le panneau source ou la ligne de tableau contenant des données, les valeurs à 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 de cet onglet, à l’aide d’un exemple de tableau répétitif dans un relevé de carte de crédit. Imaginons que vous souhaitez générer un graphique pour décrire et corréler toutes les dépenses des différentes catégories de la section de détails d’un relevé de carte de crédit, comme illustré ci-dessous.

Pour ce faire, vous devez associer les catégories à l’axe X et, sur l’axe Y, associer toutes les dépenses à chaque catégorie.

Le relevé de carte de crédit utilisé dans cet exemple est un document adaptatif et la section détaillée du relevé est un tableau, qui se présente comme suit en mode création.

Considérons les conditions requises pour générer le graphique :

  • Le graphique présente les dépenses totales de chaque catégorie dans le tableau détaillé du relevé.
  • Le type de graphique est Colonne, même si vous pouvez sélectionner n’importe quel autre type de graphique selon nécessaire.
  • La ligne du tableau du tableau détaillée du relevé est répétitive. Vous pouvez la configurer dans le champ Paramètres de répétition des propriétés de la ligne du tableau.
  • Le nom d’élément de la ligne est statementDetails. Vous pouvez le configurer dans les propriétés Ligne du tableau.
  • Le nom d’élément de la cellule de tableau dans la colonne Catégorie est Catégorie.Vous pouvez le définir en ligne. Sélectionnez la cellule, puis appuyez sur le bouton Modifier.
  • Le nom de l’élément pour la cellule de tableau dans la colonne Montant est Montant. En outre, la cellule de tableau de la colonne Montant est une zone numérique.

Avec la configuration spécifiée, le graphique à colonnes de l’exemple ressemble au graphique suivant. Chaque couleur représente une catégorie et des éléments de ligne individuels ou des quantités d’une catégorie sont ajoutés au graphique.  

La légende et l’info-bulle s’affichent comme suit.

Style

En mode Style, vous pouvez configurer la largeur en pourcentage de la largeur totale disponible dans le formulaire ou le document, ainsi que la hauteur, en pixels, du graphique. D’autres options comprennent le texte, l’arrière-plan, la bordure, les effets et les remplacements de CSS.

Pour passer en mode Style, dans la barre d’outils de la page, appuyez sur > Style.

Propriétés de graphique disponibles pour le style

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

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

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.

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 au formulaire ou document adaptatif.
  2. Dans CRXDe Lite, créez un noeud nt:unstructured (non structuré) dans le dossier d’applications avec les propriétés suivantes :
    • Définissez guideComponentType sur fd/af/reducer. (obligatoire)
    • Définissez la valeur sur un nom qualifié complet de la fonction Javascript personnalisée. (obligatoire)
    • Définissez jcr:description avec un nom significatif. Il apparaît dans la liste déroulante Utiliser la fonction. Par exemple,Multiplier.
    • Définissez qtip avec une brève description de la fonction. Il s’affiche sous forme d’info-bulle lorsque le pointeur est placé sur le nom de la fonction dans la liste déroulante Utiliser la fonction.
  3. Cliquez sur Enregistrer tout pour enregistrer la configuration.
Cette fonctionnalité est désormais disponible dans le graphique.

Actualisation automatique du graphique

Un graphique est automatiquement actualisé lorsque les utilisateurs effectuent l’une des opérations suivantes :

  • Ajoutez ou supprimez une instance du panneau source de données ou de la ligne du tableau.
  • Modifiez n’importe quelle valeur tracée sur l’axe X ou Y dans le panneau source de données ou la ligne du tableau.
  • Modifiez le type de graphique.

Utilisez le type de graphique dans les règles de formulaire adaptatif

La propriété chartType spécifie le type de graphique. Les valeurs possibles sont Circulaire, Anneau, Barre, Ligne, Ligne et point, Point et Aire. Il s’agit d’une propriété pouvant contenir des scripts, ce qui signifie que vous pouvez l’utiliser dans les règles de formulaire adaptatif pour manipuler les configurations de graphique. Voyons un exemple.

Imaginons que vous ayez configuré un graphique à colonnes. Vous souhaitez toutefois fournir aux utilisateurs une option pour qu’ils sélectionnent un type de graphique différent dans une liste déroulante et retracent le graphique. Vous pouvez pour ce faire utiliser la propriété chartType dans une règle comme suit :

  1. Faites glisser et déposer un composant de liste déroulante depuis la barre latérale d’AEM vers le formulaire adaptatif.

  2. Sélectionnez le composant et appuyez sur .

  3. Spécifiez un titre pour la liste déroulante. Par exemple, Sélectionner le type de graphique.

  4. Ajoutez les types de graphiques pris en charge dans la section Éléments afin de remplir la liste déroulante. Cliquez sur Terminé.

    Sélection d’un graphique à partir du composant déroulant
  5. Sélectionnez le composant déroulant et appuyez sur . Dans l’éditeur de règles, écrivez une règle dans l’éditeur de règles visuel comme illustré ci-dessous.

    Configuration des règles de graphique

    Dans cet exemple, le nom de l’élément du composant de graphique estmyChart.

    Vous pouvez également écrire la règle suivante dans l’éditeur de code.

    Pour plus d’informations sur l’écriture des règles, voir la section Éditeur de règles.

  6. Cliquez sur Terminé pour enregistrer la règle.

Désormais, vous pouvez sélectionner un type de graphique dans la liste déroulante et cliquer sur Actualiser pour tracer un nouveau 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