Adaptive Form Charts af-charts

A chart or a graph is a visual representation of data. It allows you to condense large amounts of information into easy-to-understand visual format, enabling you to better visualize, interpret, and analyze complex data.
AEM Forms add-on package provides an out-of-the-box Chart component. You can use in your adaptive forms and documents for visual representation of two-dimensional data in repeatable panels and tables. The Chart component allows you to add and configure the following types of charts:

The Chart component supports and provides in-built statistical functions – sum, mean, maximum, minimum, mode, median, range, and frequency – to compute and plot values on a chart. In addition to the functions available out-of-the-box, you can write your own custom functions and make them available for use in charts.

Let’s now look at how to add and configure the Chart component:

Add chart add-chart

The Chart component is available in AEM sidebar, by default. You can drag-drop the Chart component from AEM sidebar to the adaptive form or document in authoring mode. When you drop the component, it creates a placeholder for a chart.

Configure chart configure-chart

To configure the chart, click the Chart component and click to open the Edit Chart dialog. The dialog includes Title and text, Configuration, Advanced options, and Styling tabs that allow you to configure the chart.

Basic basic

In the Basic tab, you can configure the following properties:

Configuration configuration

In the Basic tab, you define the type of chart, the source panel or table row that contain data, the values to be plotted on X-axis and Y-axis of the chart, and optionally the statistical function to compute the values for plotting on the chart.

Let’s understand in detail about the information that goes in this tab, with the help of an example of a repeatable table in a credit card statement. Consider that you want to generate a chart to depict and correlate the total expense in different categories in the statement details section of a credit card statement, as shown below.

To accomplish this, you need to plot categories on X-axis, and on the Y-axis, plot the total expenditure in each category.

The credit card statement used in this example is an adaptive form document and the statement details section is a table, which looks as follows in the authoring mode.

Let’s consider the following requirements and conditions for generating the chart:

The legend and the tool tip appear as follows.

Styling styling

In the Styling mode, you can configure the width, in percentage of the total width available in the form or document, and height, in pixels, for the chart. Other options include text, background, border, effects, and CSS overrides.

To switch to styling mode, in the page toolbar, tap>>Style.

Use functions in chart use-functions

You can configure a chart to use statistical functions to compute values from the source data for plotting on the chart. While the Chart component have some in-built functions, you can write your own functions and make them available for use in the chart configuration.

Default functions default-functions

The following functions are available by default with the Chart component:

Custom functions custom-functions

In addition to using the default functions in charts, you can write custom functions in JavaScript and make them available in the list of functions in the Chart component.

A function takes an array or values and a category name as inputs and returns a value. For example:

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

Once you have written a custom function, do the following to make it available for use in the chart configuration:

Auto refresh chart auto-refresh-chart

A chart refreshes automatically when users do one of the following:

Use chart type in adaptive form rules chart-in-rules

The chartType property specifies the type of chart. The possible values are pie, donut, bar, line, linepoint, point, and area. It is a scriptable property, which means you can use it in adaptive form rules to manipulate chart configurations. Let’s understand it with the help of an example.

Consider that you configured a Column chart. However, you also want to provide users an option to select a different chart type from a drop-down list and redraw the chart. You can achieve this using the chartType property in a rule as follows:

Now, you can select a chart type from the drop-down list and click refresh to redraw the chart.