Graphiques de formulaire adaptatif af-charts

Un diagramme ou un graphique est une représentation visuelle des données. Il vous permet de condenser de grandes quantités d’informations dans un format visuel facile à comprendre, ce qui vous permet de mieux visualiser, interpréter et analyser des données complexes.
Le package de modules complémentaires AEM Forms fournit un composant de graphique prêt à l’emploi. Vous pouvez l’utiliser dans vos formulaires et documents adaptatifs pour une représentation visuelle des données bidimensionnelles dans des panneaux répétables et des tableaux. Le composant de graphique vous permet d’ajouter et de configurer les types de graphiques suivants :

Le composant de graphique prend en charge et fournit des fonctions statistiques intégrées (somme, moyenne, maximum, minimum, mode, médiane, plage et fréquence) pour calculer et tracer des valeurs dans un graphique. Outre les fonctions prêtes à l’emploi disponibles, vous pouvez créer vos propres fonctions personnalisées et les rendre disponibles pour utilisation dans les graphiques.

Examinons maintenant comment ajouter et configurer le composant de graphique :

Ajouter un graphique add-chart

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

Configurer le graphique configure-chart

Pour configurer le graphique, cliquez sur le composant de graphique, puis sur pour ouvrir la boîte de dialogue Modifier le graphique. La boîte de dialogue comprend les onglets Titre et texte, Configuration, Options avancées et Style qui vous permettent de configurer le graphique.

Réglages de base basic

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

Configuration configuration

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

Pour ce faire, vous devez tracer les catégories sur l’axe X et, sur l’axe Y, vous devez tracer le total des dépenses dans chaque catégorie.

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

Examinons les conditions et exigences suivantes pour générer le graphique :

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

Style styling

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

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

Utiliser des fonctions dans le graphique use-functions

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. Outre les fonctions intégrées du composant de graphique, vous pouvez créer vos propres fonctions et les rendre disponibles pour qu’elles soient utilisées dans la configuration du graphique.

Fonctions par défaut default-functions

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

Fonctions personnalisées custom-functions

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.

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 :

Actualisation automatique du graphique auto-refresh-chart

Un graphique s’actualise automatiquement lorsque les utilisateurs et utilisatrices effectuent l’une des opérations suivantes :

Utiliser le type de graphique dans les règles de formulaire adaptatif chart-in-rules

La propriété chartType indique 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é scriptable, ce qui signifie que vous pouvez l’utiliser dans des règles de formulaire adaptatif pour manipuler les configurations de graphique. Voyons un exemple.

Imaginons que vous ayez configuré un graphique à colonnes. Cependant, vous souhaitez également offrir aux utilisateurs et utilisatrices la possibilité de sélectionner un autre type de graphique dans une liste déroulante et de retracer le graphique. Pour ce faire, utilisez la propriété chartType dans une règle comme suit :

Vous pouvez maintenant sélectionner un type de graphique dans la liste déroulante et cliquer sur Actualiser pour retracer le graphique.