Proportion Calculation for Custom Labels

Version

Problem Description

You can choose Style > Label, select Common for Content, and tick Percentage to show the proportion of each value of the current series to the total of all series values in a single category. If you tick Percentage in a chart containing a single series and multiple categories, the proportion of each value of the series is 100%, as shown in the following figure.

How to display the proportion of each category by label for a single series? The following figure shows the effect.

Implementation Method

Choose Cell Element > Style > Label, select Custom for Content, and enter JavaScript code (in which you can quote a formula to change the value format) to perform calculations.

Data Preparation

Choose File > New General Report, and select Refresh Technology as the template theme.

Create a database query named ds1, and enter the SQL statement SELECT * FROM Sales_Volume WHERE Region='California' to extract the data in California from Sales_Volume, as shown in the following figure. Create a database query ds1 with the SQL statement SELECT * FROM Sales_Volume WHERE Region='California' to extract the data in California from Sales_Volume.

Report Design

Chart Insertion

Merge required cells and insert Column Chart, as shown in the following figure. 

Data Binding

Select the chart, choose Cell Element > Data, bind the data from ds1 to the chart, and select Product for Category, and Sales Volume for Field Name to display multiple categories in one series, as shown in the following figure. 

Chart Style Setting

1. Title Setting

Select the chart, choose Cell Element > Style > Title, and enter Proportion Pre Product by Sales, as shown in the following figure. 

2. Label Setting

Select the chart, choose Cell Element > Style > Label, tick Use Label, select Custom for Content, and enter the following code:

function() {
var points = this.series.points; //Obtain all data points in the current series.
var total = 0;
for (var i = 0, len = points.length; i < len; i++) {
total += points[i].value; //Calculate the series sum in the category.
}
return FR.contentFormat(this.value/total, '#0%'); //Calculate the proportion.
}

Note:

You can customize the value format by FR.contentFormat. #0% refers to the custom format, which can be replaced according to actual situations, as shown in the following figure.

Note:

This setting is also suitable for FVS visualization dashboards and FRM dashboards.

Effect Display

PC

Save the template and click Pagination Preview. The following figure shows the effect.

Mobile Terminal

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

For details, you can download the template Proportion Calculation for Custom Labels.cpt