Proportion Column Chart

1. Application scenarios

When there is an inclusion relationship between the two series, we hope that the columns of the two series can be overlapped, so that we can see the proportion relationship between the two series directly.

For example, there are two series in the column chart: Amount balance and Price. Now we want to make these two series overlap in the column chart to visually show the proportion of Price to the amount Balance, as shown in the figure below:

2. Function entrance

Set the Series Interval under column chart Style >Series to - 100 to overlap all series, as shown in the following figure:

3.  Application Examples

The built-in component reuse function can be used in the decision report, and the component style can be quickly reused by directly replacing the data to realize the custom column rounded corner properties and width effects.

1. Data preparation

Create a new built-in dataset named embedded1. The fields and data are shown in the following figure:

2. Insert chart

Merge a range cell and insert a column chart, as shown in the following figure:

3. Binding data

Bind column chart data, as shown in the following figure:

4. Add title

Add title to column chart: proportion column chart, position on the left, set font style, as shown in the figure below:

5. Achieve cylindrical overlap

Under column chart style > series, set the series interval to - 100, as shown in the following figure:

6. Custom label

Add a new condition attribute of label type under Special Effects >Condition Display, and customize the text content, as shown in the following figure:

The JavaScript code is as follows:

function(){ 
 var result=(this.points[1].value/this.points[0].value*100).toFixed(2);
 result=result+"%";
 return result}

7. Effect preview

1) PC terminal

Save the report and click pagination preview. The effect is as follows:

2) Mobile terminal

Both app and H5 preview are supported, and the effect is shown in the following figure:

Completed template, see 

 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\ColumnAndBar\Proportion_Column_Chart.cpt

Click to download template:

Proportion_Column_Chart.cpt