Carousel Luminous Gauge

Application Scenario

Different from the gauge in the basic chart, the carousel luminous gauge presents a luminous effect and is generally used for the scene displayed on the large screen. The following figure shows the effect.

Function Description

The carousel luminous gauge can display percentage values and gauge scales in a dynamic way.

The carousel luminous gauge allows you to adjust the styles of the graphics and the background.

The carousel luminous gauge allows you to customize the carousel interval and linkage.

The carousel luminous gauge allows you to refresh the chart.

The carousel luminous gauge does not display progress bar when the percentage value is negative.

Plugin Installation

Click to download the plugin: Extended Chart Plugin.

For details about how to install the plugin in the designer, see Designer Plugin Management.

For details about how to install the plugin on the server, see Server Plugin Management.

Data Preparation

Choose File > New General Report in the upper left corner of the designer, and enter the database query statement SELECT * FROM  Sales_Volume to create a dataset ds1, as shown in thef ollowing figure.

Report Design

1. Merge required cells, select the merged cell, click the Insert Chart icon on the upper toolbar, and insert a carousel luminous gauge, as shown in the following figure.

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

Playback Dimension: The playback dimension here is similar to the category feild of the column chart, and you can select the category of the dataset.

Indicator Value: Numerator of the percentage.

Target Value: Denominator of the percentage. The setting of the target value is set to Auto by default, which means that the target value is automatically calculated based on the current value.

Note: 

When there is a null value in the indicator value or target value, the corresponding null data will be filtered and not displayed. When there are both a positive and a negative value in the indicator value or target value, the corresponding data will be filtered and not displayed. When the target value is zero, the corresponding data will be filtered and not displayed.

3. Choose Style > Graphics on the chart attribute panel, and set the graphics attributes as shown in the following figure.

Content: You can set the content to display the indicator value, the target value, and the percentage or not (displayed by default), and set the format of the displayed value.

Section Configuration: The value of the section color is set to Auto by default. You can select Custom and set the color of each section.

4. Choose Style > Background on the chart attribute panel, and set the background attributes as shown in the following figure.

Fill: You can select No Background, Color, Image, or Gradient Color. The chart is filled with the dark color by default.

Opacity: You can adjust the opacity of the background, and the opacity value is set to 10 by default.

5. Select Special Effect on the chart attribute panel, and set the carousel interval and the carousel linkage. In this example, the setting items are set by default, as shown in the following figure.

Carousel Interval: You can set the carousel interval (set to 4s by defaut) of the chart.

Carousel Linkage: You can add the carousel linkage for the chart.

Effect Display

Save the template and click Pagination Preview. The effect is the same as that shown in section "Application Scenario."

Note: 

The effect cannot be previewed on mobile terminals.

For details, you can click to download the template Carousel Luminous Gauge.cpt