Graphical display of data (progress bar/level)

1. Expected effect

In the report, in order to analyze the data and see the trend and bottleneck of the data, the statistical graph is often used to display the data, because the graphical method is more intuitive than the numerical method.

For example, the sales volume of each salesperson, the user evaluation level, etc., it is hoped that a progress bar or other graphic signs will be displayed directly in the cell to indicate the data or level, as shown in the following figure:

1) Special symbols

2) Progress bar

2. Realization ideas

There are two ways to achieve the above effects:

1) Realized by plugin, please refer to: Cell progress bar plugin for details

2) Through HTML implementation, this article will introduce this production method in detail.

1. Create report

Create a new normal report, create a new built-in dataset ds1, as shown in the following table:

2. Design report

The report body style, as shown in the figure below:

The specific settings of data columns and cells are shown in the following table:

         For the specific usage of the Repeat function, please refer to: Repeat function

3. Effect preview

Save the template, clickpagination preview, the effect is as shown in the figure below:

1. Create report

Create a new normal report, create a new built-in dataset ds1, as shown in the following table:

2. Design report

The report body style, as shown in the figure below:

In cell C7, enter the formula:

"<table width=" + ROUND(B7 * 200 / sum(B7[!0;!0]), 2) + "% border=0 cellspacing=0 cellpadding=0> <tr> <td bgcolor=#0000FF><div color=#ffffff align=right>" + B7 + "</div></td> </tr> </table>"

The definition of the formula is shown in the following table:

Note: The length of the progress bar is determined by the width, and the calculation of the width is a value that needs to be observed (such as: the proportion of a person's value in the entire staff or a certain attribute value of a person) multiplied or divided by one The ratio, such as 200 in the example. Similar effects can be achieved by using ROUND(B7 * 200, 2) or B7 * 200 in this example.

3. Set cell attributes

1) Select cell C7, click Cell Attributes> Style> Alignment, and set the Text Style to Single Line(Adjust Font), as shown in the figure below:

2) Select cell C7, click Cell Attributes> Other, and set Display Content to Display by HTML, as shown in the following figure:

4. Effect preview

Save the template, click pagination preview, the effect is as shown in the figure below:

Refer to the completed template%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\ReportApplication\BasicApplication\bar.cpt

Click to download: 

bar.cpt