Using charts in Interactive Communications 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 add-and-configure-chart-in-an-interactive-communication
Perform the following steps to add and configure a chart in an Interactive Communication:
-
Select Components from the sidekick of the Interactive Communication.
-
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
-
Select 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 select the eye icon for the chart in the Content tab of Agent UI to show or hide the chart.
-
Select to save the chart properties.
Select Preview to view the appearance and data associated with the chart. Select Edit to reconfigure the properties of the chart.
Configure chart properties configure-chart-properties
Configure the following properties while creating charts for print and web channels:
Use functions in chart 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.
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 customfunctionsweb
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 asfd/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.
Example 1: Chart output in print and web chartoutputprintweb
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 columnchartprint
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
Donut chart for web donutchartweb
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
Example 2: Application of Sum and Frequency functions in a line chart applicationsumfrequency
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
Sum function 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.
Frequency function 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.
Example 3: Multi-series Quadrant chart in Web example-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.