Using charts in Interactive Communications using-charts-in-interactive-communications

Using charts in an Interactive Communication, you can condense large amounts of information into an easy to analyze and understand visual format

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 allows you to add and configure the following types of charts:

Add and configure chart in an Interactive Communication add-and-configure-chart-in-an-interactive-communication

Complete the following steps to add a chart to an Interactive Communication:

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 credit 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, you need to specify:

Figure: Column chart in the print output of an Interactive Communication

A. Y axis - Amount fetched from the form data model property and Title property set to Amount ($) B. Label Direction of X-axis set to Tilt Left C. X Axis - Expense description fetched from the form data model property and Title property set to Expense

Figure: Donut chart in the web output of an Interactive Communication

A. Inner Radius property of the donut is set B. Show Legend property is selected and Legend Position property is set to Right C. Tooltip displays the detail of the item on mouse over - Tooltip is set to ${x}: $ $

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.

Figure: Line chart without a function with three “Bed and Breakfast” 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 three Bed and Breakfast transactions ($99.45, $78, and $12) and show only one transaction ($189.45).

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 on X or Y axis for a given value on the other axis. With application of the Frequency function on the y-axis (Amount/TransAmount), the graph displays that there have been three occurrences of Bed and Breakfast transactions and one occurrence of rest of the types of transactions.

Basic properties in charts basicpropertiescharts

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

Name An identifier for the chart element. Name is not visible on the chart but helps when referring to the element from other components, scripts, and SOM expressions.

Title (Print channel only) Specifies title of the chart.

Chart type Specifies the type of chart you want to generate. The available options are Pie, Column, Donut, Bar (Web channel only), Line, Line and Point, Point, and Area. For more information, see Example 1: Chart output in print and web.

X-axis > Title Specifies the title for the x-axis.

X-axis > Data Model Object * Specify the name of the form data model collection item to be plotted on x-axis.

X-axis > Function Specifies the statistical/custom function to use for computing the values on x-axis. For more information about functions, see Use functions in chart and Example 2: Application of sum and mean functions in a line chart.

X-axis > Label Direction Direction of the label on the chart in print channel. If you choose direction of the label as Custom Rotation, Custom Rotation Angle (degrees) field appears. In the Custom Rotation Angle (degrees) field, you can choose angle of rotation in steps of 15 degrees.

Y-axis > Title Specifies the title for the y-axis.

Y-axis > Data Model Object * Specifies the 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 type Number.

Y-axis > Function Specifies the statistical/custom function to use for computing the values on y-axis. For more information about functions, see Use functions in chart and Example 2: Application of sum and mean functions in a line chart.

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.

Height (Print channel only) Height of the chart in pixels.

Width (Print channel only) Width of the chart in pixels.

Tooltip (Web channel only) Specifies the 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.

CSS Class (Web channel only) Specify the name of a CSS class in the CSS class field to apply custom styling to the chart.

Mandatory Page Break Before (Print channel only) 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 (Print channel only) 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 (Print channel only) Specify the indentation of the chart from the left of the page.

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

Use functions in chart usefunction

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 your own functions and make them available for use in the chart configuration in the Web channel.

Default functions default-functions

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

Custom functions in web channel 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:

The function is now available for use in the Chart.