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.
Perform the following steps to add and configure a chart in an Interactive Communication:
Tap Components from the sidekick of the Interactive Communication.
Drag and drop the Chart component to one of the following components:
Tap the chart component in the Interactive Communication editor and select Configure ( ) 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 web channel
Configure the chart properties based on the channel type.
(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.
Tap 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 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. | |
Height | Height of the chart in pixels. | |
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. | |
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. | |
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. | |
Indentation | Indentation of the chart from the left of the page. | |
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:
|
Print and Web |
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.
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.
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:
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.
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.
Click Save All to save the configuration.
The function is now available for use in the Chart.
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.
To accomplish this, specify the following properties:
Column chart in the print channel of an Interactive Communication
To accomplish this, specify the following properties:
Donut chart in the web channel of an Interactive Communication
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
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.
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.
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.