Composition Waterfall Chart

Application Scenario

Composition waterfall charts are suitable for displaying whole-part hierarchies or sequential changes. For example, the following figure clearly shows the expenditure in every aspect and the total expenditure with food and rent accounting for the most.

Implementation Method

A composition waterfall chart is produced by Stacked Column Chart, which is implemented as follows:

1. The original data are all positive numbers. For details about negative numbers in the original data, see Change Waterfall Chart.

2. Except for the columns showing initial data and final data, other data needs to be stacked with placeholder data. The placeholder data needs to be hidden in charts.

To achieve this, you need to process data by formulas to obtain placeholder data, bind cell data to the chart, and hide placeholder data under Special Effect > Condition Display in the chart.

Data Preparation

Choose File > New General Report in the upper left corner of the designer and create a built-in dataset named Expenditure Details, as shown in the following figure.

Table Design

Table Style Setting

Design the table style, as shown in the following figure.

Data in cells A2 and B2 comes from the dataset, and cell C2 contains auxiliary data obtained using formulas. The following table shows the specific settings.

After the settings are completed, save the report and click Pagination Preview to preview the report, as shown in the following figure.

Condition Attribute Setting

According to the above preview effect, the placeholder data is not 0 for the total expenditure. However, the placeholder data needs to be 0 for both the initial data and final data. Therefore, you need to set a condition attribute for cell C2.

Select cell C2, click Condition Attribute on the right, add a condition attribute, set New Value to integer 0, add the formula A2="Total Expenditure", and click the Add button.

Preview the report again. The placeholder data is 0 for Total Expenditure, as shown in the following figure.

Chart Setting

Chart Insertion

Merge required cells and insert a stacked column chart, as shown in the following figure. 

Data Binding

Select the chart, choose Cell Element > Data, and bind cell data.

1. Set Category Name to =A2 so that all the values are expanded from cell A2.

2. Enter Placeholder in Series and set Value to =C2 for series 1.

3. Enter Value in Series and set Value to =B2 for series 2.

Chart Style Setting

(1) Chart Title

Choose Style > Title and enter Composition Waterfall Chart in Text.

(2) Legend Cancellation

Choose Style > Legend and deselect Show Legend.

(3) Chart Label Setting

Choose Style > Label, select Use Label, select Value on the Common tab page in Content, set Position to Outside, and enable Overlap Adjustment.

(4) Condition Display Setting

Choose Special Effect > Condition Display, add a condition attribute, and double-click the attribute to rename it Transparent Color for Placeholder Data, as shown in the following figure.

Click the left editing icon to enter the configuration panel. Add an attribute with Color set to Transparent. Set Available Column to Series Index and Operator to Equal to, select String, and enter 1 (namely, the Placeholder series) in the text box, as shown in the following figure. 

Table Hiding

After all settings are completed, select the rows where the table is located, right-click the row index, and hide the table.

Effect Display

1. PC

Save the report and click Pagination Preview. The effect is the same as that shown in section "Application Scenario."

2. Mobile Terminal

The report can be previewed on both the DataAnalyst app and the HTML5 terminal. The following figure shows the effect.

The completed template can be found in: %FR_HOME%/webapps/webroot/WEB-INF/reportlets/doc-EN/Chart/ColumnChart/Composition Waterfall Chart.cpt

For details, you can click to download the template Composition Waterfall Chart.cpt.