Creating a Progress Bar by the Gauge

Expected Effect

Use a gauge to create a progress bar, as shown in the following figure.

Implementation Method

Insert a gauge into the merged cells, set the data, and adjust the style.

Data Preparation

Create a dataset ds1 with the database query statement: SELECT * FROM Sales_Volume.

Report Design

1. Table Design

Set the table style as shown in the following figure and select Summary and Sum in Data Setting for Cell E1.

2. Chart Design

(1) Merge cells B1, C1, and D1, click the Insert Chart icon, and choose Gauge > Tube Gauge.

(2) Bind the data to the chart, as shown in the following figure.

(3) Deselect Show Title, as shown in the following figure.

(4) Deselect Use Label, as shown in the following figure.

(5) Set Sort Orientation in Series to Vertical, as shown in the following figure.

(6) Set the axis: Select Hide in Axis Label, deselect Custom Minimum Value, and set the colors of Main Tick and Minor Tick to transparent, as shown in the following figure.

(7) Deselect all options in Content under Special Effect > Toolbar, as shown in the following figure.

Effect Display

1. PC

Save the report and click Pagination Preview. The following figure shows the effect of the progress bar.

2. Mobile Terminal

The completed template can be found in: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\Progress Bar by Gauge.cpt

You can download the example template.Progress Bar by Gauge.cpt