Using charts in Interactive Communications

A chart or a graph is a visual representation of data. It condenses large amounts of information into easy-to-understand visual format, enabling the recipients of the Interactive Communication to better visualize, interpret, and analyze complex data.

While creating an Interactive Communication, you can add charts to visually represent two-dimensional data from the Interactive Communication’s form data model. The Chart component lets you add and configure the following types of charts: Pie, Column, Donut, Bar, Line, Line and Point, Point, Area, and Quadrant.

Add and configure chart in an Interactive Communication

Perform the following steps to add and configure a chart in an Interactive Communication:

  1. Tap Components from the sidekick of the Interactive Communication.

  2. Drag and drop the Chart component to one of the following components:

    • Print channel: Target area or Image field
    • Web channel: Panel or Target area

  3. Tap the chart component in the Interactive Communication editor and select Configure ( configure_icon) from the Component toolbar.

    The Chart Properties display in the left pane.

    Basic properties of a line type chart in print channel

    Basic properties of a line type chart in print channel

    Basic properties of a line type chart in web channel

    Basic properties of a line type chart in web channel

  4. Configure the chart properties based on the channel type.

  5. (Print channel only) In the Agent Settings, specify if it is mandatory for the agent to use this chart. If i t Is Mandatory For the Agent To Use This Chart option is not selected, the agent can tap the eye icon for the chart in the Content tab of Agent UI to show or hide the chart.

    chart_agentproperties

  6. Tap done_icon to save the chart properties.

    Tap Preview to view the appearance and data associated with the chart. Tap Edit to reconfigure the properties of the chart.

Configure chart properties

Configure the following properties while creating charts for print and web channels:

Field Description Channel Type
Name Identifier for the chart element. The name of the chart specified in this field is not visible on the chart. It is used when referring to the element from other components, scripts, and SOM expressions. Print and Web
Chart type Type of chart you want to generate. The available options are Pie, Column, Donut, Bar, Line, Line and Point, Point, and Area. Print and Web
Series > Multiple Series Select to add multiple series for the form data model collection items plotted on X-axis and Y-axis. Print and Web
Series > Data Model Object Name of the form data model collection item to add multiple series to the chart.
Choose a parent form data model object property for the properties plotted on X-axis and Y-axis to form a meaningful series. The data model object that you bind must be of Number, String, or Date type.		 Print and Web
Show Stacked Select to stack the values of each series on top of each other. Print and Web
X-axis > Title Title for the X-axis. Print and Web
X-axis > Data Model Object

Name of the form data model collection item to be plotted on X-axis.

Choose two collection/array type properties of the same parent data model object that are meaningful in relation to each other to plot on the X and Y-axis of a chart. The data model object that you bind must be of Number, String, or Date type.

 Print and Web
Y-axis > Title Title for the Y-axis. Print and Web
Y-axis > Data Model Object

Form data model collection item to be plotted on Y-axis. In the Print channel, the data model object for the Y-axis should be of Number type.

Choose two collection/array type properties of the same parent data model object that are meaningful in relation to each other to plot on the X and Y-axis of a chart.

Print and Web
Y-axis > Function Statistical/custom function to use for computing the values on y-axis. Print and Web
Hide Object Select to hide the chart in the final output. Print and Web
Title Title of the chart. Print
Height Height of the chart in pixels. Print
Width Width of the chart in pixels. You can control width of chart in web channel using the style layer or by applying a theme. Print
Mandatory Page Break Before Select to add a mandatory page break before the chart and put the chart on the top of a new page. Print
Mandatory Page Break After Select to add a mandatory page break after the chart and put the contents following the chart on the top of a new page. Print
Indentation Indentation of the chart from the left of the page. Print
Tooltip

Format in which the tooltip appears on mouseover on a data point in the chart in the web channel. The default value is ${x}(${y}). Depending on the chart type, when you point the mouse on a point, bar, or slice in the chart, the variables ${x}and ${y} are dynamically replaced with the corresponding values on X-axis and Y-axis and displayed in the tooltip.

To disable tool tip, leave the Tooltip field blank. This option is not applicable for Line and Area charts. For example, see Example 1: Chart output in print and web.

 Web
Chart-specific configurations

In addition to common configurations, the following chart-specific configuration are available:

  • Show legend: Shows a legend for the pie or donut chart when enabled.
  • Legend position: Specifies the position of the legend with respect to the chart. The available options are Right, Left, Top, and Bottom. It is recommended to use the right-side legend in the print channel.
  • Inner radius: Available for Donut charts to specify the radius (in pixels) of the inner circle in the chart.
  • Line color: Available for Line, Line and Point, and Area charts to specify the color for the line in the chart.
  • Point color: Available for Point and Line and Point charts to specify the color for the points in the chart.
  • Area color: Available for Area charts to specify the color for the area under the line in the chart.
  • Reference Point > Binding Type: Available for Quadrant charts to specify the binding type for the reference point. Use static text or data model object property to define the value for the reference point.
  • Reference Point > X-axis: Available for Quadrant charts if you select Static from the Binding Type drop-down list to specify the X-axis value for the reference point.
  • Reference Point > Y-axis: Available for Quadrant charts if you select Static from the Binding Type drop-down list to specify the Y-axis value for the reference point.
  • Reference Point > Data Model Object for Series: Available for multiple series Quadrant charts if you select Data Model Object from the Binding Type drop-down list. Define the form data model object property to identify the series for the reference point.
  • Reference Point > Data Model Object Value for Series: Available for multiple series Quadrant charts if you select Data Model Object from the Binding Type drop-down list. Use the form data model object property for series and the value defined in this field to identify the series for the reference point.
  • Reference Point > Data Model Object for Reference Point: Available for Quadrant charts if you select Data Model Object from the Binding Type drop-down list. Define a form data model object property that is a sibling to the properties plotted on X-axis and Y-axis. In addition, for multiple series, define a data model object property that is a child entity of the data model object property defined for the series.
  • Reference Point > Data Model Object Value for Reference Point: Available for Quadrant charts if you select Data Model Object from the Binding Type drop-down list. Use the form data model object property for reference point and the value defined in this field to identify the reference point for the chart.
    Quadrant Labels > Top Left: Available for Quadrant charts to specify the name for the Top Left quadrant.
  • Quadrant Labels > Top Right: Available for Quadrant charts to specify the name for the Top Right quadrant.
  • Quadrant Labels > Bottom Right: Available for Quadrant charts to specify the name for the Bottom Right quadrant.
  • Quadrant Labels > Bottom Left: Available for Quadrant charts to specify the name for the Bottom Left quadrant.
 Print and Web

Use functions in chart

You can configure a chart to use statistical functions to compute values from the source data for plotting on the chart. By applying functions in a chart, you can plot data that is not directly provided by the form data model.

Functions in charts

While the Chart component come with some in-built functions, you can write custom functions and make them available for use in the chart configuration in the web channel.

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

Mean (Average) Returns the average of the values on X or Y axis for a given value on the other axis.

Sum Returns the sum of all values on X or Y axis for a given value on the other axis.

Maximum Returns the maximum of the values on X or Y axis for a given value on the other axis.

Frequency Returns the number of values on X or Y axis for a given value on the other axis.

Range Returns the difference between the maximum and minimum of the values on X or Y axis for a given value on the other axis.

Median Returns the value that separates higher and lower values in half on X or Y axis for a given value on the other axis.

Minimum Returns the minimum of the values on X or Y axis for a given value on the other axis.

Mode Returns the value with most occurrences on X or Y axis for a given value on the other axis.

For more information, see Example 2: Application of Sum and Frequency functions in a line chart.

Custom functions in web channel

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 for web channel.

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:

  1. Add the custom function in the client library associated with the relevant Interactive Communication. For more information, see Configuring the Submit action and Using Client-Side Libraries.

  2. To display the custom function in Function drop-down, in CRXDe Lite, create an nt:unstructured node in the apps folder with the following properties:

    • Add property guideComponentType with value as fd/af/reducer. (mandatory)

    • Add property value to a fully qualified name of the custom JavaScript™ function. (mandatory) and set its value to name of the custom function, such as Multiply.

    • Add property jcr:description with the value you want to display as the name of the custom function that appears in the Function drop-down. For example, Multiply.

    • Add property qtip with value that will be short description of the custom function. It appears as a tooltip when hovering pointer over the function name in the Function drop-down list.

  3. Click Save All to save the configuration.

The function is now available for use in the Chart.

Example 1: Chart output in print and web

In the Basic tab, you define the type of chart, the source form data model properties that contain data, the labels 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 minimum required information in basic properties, with the help of a card statement generated using an Interactive Communication. Consider that you want to generate a chart to depict the amount of different expenses in the statement. You want to use different types of charts for print and web output of the Interactive Communication.

Column chart for Print

To accomplish this, specify the following properties:

  • Name - Specify the name for the chart.
  • Chart Type - Select Column from the drop-down list.
  • Title - Specify Expense Type for X-axis and Transaction Amount for the Y-axis.
  • Data Model Objects - Select the data model object properties to create data bindings for X-axis (Expense Type) and Y-axis (Transaction Amount).

Column chart in the print channel of an Interactive Communication

Column chart in the print channel of an Interactive Communication

Donut chart for web

To accomplish this, specify the following properties:

  • Name - Specify the name for the chart.
  • Chart Type - Select Donut from the drop-down list.
  • Data Model Objects - Select the data model object properties to create data bindings for X-axis (Expense Type) and Y-axis (Transaction Amount).
  • Inner Radius - Specify the Inner Radius value as 150 to specify the radius (in pixels) of the inner circle in the chart.
  • Tooltip - Use the ${x}(${y}) default format to display the tooltip. The tooltip is displayed as: Expense Type(Transaction Amount). Example: Debit for Bitcoin(10000).

Donut chart in the web channel of an Interactive Communication

Donut chart in the web channel of an Interactive Communication

Example 2: Application of Sum and Frequency functions in a line chart

By applying functions in a chart, you can plot data that is not directly provided by the form data model. In this example, we use a credit card statement example to understand how Sum and Frequency functions can be applied to the chart.

Line chart without a function with two "Debit for AirBnB" transactions

Line chart without a function with two “Debit for AirBnB” transactions

Sum function

You can apply the sum function to add up values of multiple instances of same data property and show it only once. For example, in the following graph, the Sum function is applied on the Y-axis to add up the amount of the two Debit for AirBnB transactions (2050 and 1050) and show only one transaction (3100).

Sum function can make graph more useful when you want to collate and display sum for many instances of the same data property.

Line chart sum

Frequency function

The Frequency function returns the number of values Y-axis for a given value on the other axis. With application of the Frequency function on the Y-axis (Transaction Amount), the graph displays that there have been two occurrences of Debit for AirBnB transactions and one occurrence of rest of the types of transactions.

Line chart frequency

Example 3: Multi-series Quadrant chart in Web

The chart plots the amount for transactions performed in a certain date range. The Quadrant chart provides the ability to divide the chart area into four labelled sections. The char uses a static reference point for X-axis and Y-axis. Use the multiple series feature to segregate data based on the name of the bank.

To accomplish this, specify the following properties:

  • Name: Specify the name for the chart.

  • Chart Type: Select Quadrant from the drop-down list.

  • Select the Multiple Series checkbox.

  • Data Model Object: Specify the data model object property for the series. The data model object property for the bank name is a parent to the data model object properties plotted in X-axis and Y-axis.

  • Data Model Objects: Select the data model object properties to create data bindings for X-axis (Transaction Date) and Y-axis (Transaction Amount).

  • In the Reference Point section, select Static as the Binding Type.

  • Specify the values for X-axis and Y-axis reference points.

  • Specify the quadrant labels for Top Left, Top Right, Bottom Right, and Bottom Left quadrants.

  • Select the Show legends checkbox to display the colour codes for the bank names.

Quadrant charts

Business.Adobe.com resources

Docs links
Auto Text Summarization Mobile Forms Responsive Forms Document Generation Dynamic Forms Digital Asset Management

On this page