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:

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:

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:

Column chart in the print channel of an Interactive Communication

Donut chart for web donutchartweb

To accomplish this, specify the following properties:

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: