Successfully!

Error!

Use the Gauge to Realize Progress Bar

  • Last update:  2021-11-18
  • I. Overview

    1. Expected effect

    Use the gauge to achieve the effect of the progress bar, as shown below:

    1.png


    2. Implementation ideas

    Insert the gauge in the cell, then set the data and adjust the style.

    II. Example

    1. Prepare Data

    Create a new dataset ds1, the database query statement is: SELECT * FROM Sales_Volume

    2.png


    2. Design Report

    1) Design Form

    The table style is as follows, the E1 cell data is set to summary > sum.

    3.png3.png

    2) Design Chart

    • Combine cells B1, C1, and D1, insert the Gauge, and select the Tube Gauge.

    4.png

    • Bind chart data, as shown in the figure below:

    5.png

    • Uncheck the Show Title , as shown in the figure below:

    6.png

    • Uncheck the Use Label, as shown in the figure below:

    7.png

    • The arrangement direction of the series is set to Vertical , as shown in the figure below:

    8.png

    • Set the Axis, the Axis Label is set to Hidden, uncheck the Custom Minimum Value, and set the color of the Main Tick and Minor Tick to transparent, as shown in the figure below:

    9.png

    • Cancel the Toolbar display, as shown in the figure below:

    10.png


    3. Effect preview

    1) PC terminal

    Save the report, click the Pagination Preview, the effect is shown in the figure below:

    11.png


    2)Mobile terminal

    12.png


    III. Template download

    The completed template can be found at: 

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\Chart\Use_the_gauge_to_realize_the_progress_bar.cpt

    Click to download the template: 

    Use_the_gauge_to_relize_the_progress_bar.cpt


    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback