Liquid-Fill Chart

Version

Note:

The liquid-fill chart is not supported on mobile terminals, and cannot be exported.

Application Scenario

Unlike the Extended Chart plugin (which also supports the liquid-fill chart), this plugin allows you to display percentage data in layers and customize the style and various attributes of the liquid-fill chart, as shown in the following figure.

Function Description

• The liquid-fill chart is used to display a single percentage value.

• You can customize the style and attributes of the liquid-fill chart to achieve stunning data visualization effects.

• The liquid-fill chart can display percentage data in layers based on different stages of progress.

Plugin Installation

You can contact our technical support to obtain the 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.

Procedure

1. In General Reports

After the plugin is installed, merge required cells, select the merged cell, click the Insert Chart icon, select the added Liquid-Fill Chart, and click OK.

2. In Dashboards

After the plugin is installed, drag the Liquid-Fill Chart icon from the chart management panel into the design body of the dashboard.

Attribute Setting

Data

Bind data to the liquid-fill chart. Currently, only dataset data is supported, and cell data is not supported. Ensure that Data Field is set to a field with percentage data.

Style

You can customize the format of attributes such as the title, label text, wave, and outer-ring line.

Note:

SVG Path here refers to the content of the SVG (namely a string in the format of <svg>...</svg>), rather than a file path. Support for file paths is currently under development.

Data Preparation

Create a built-in dataset and rename it Liquid-Fill Chart.

Report Design

1. For example, create a general report and insert the liquid-fill chart into the report.

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

3. Set Title to Liquid-Fill Chart, Title Text Size to 20, Tip to Percentage Per Quarter, and retain the default settings for the rest.

Effect Display

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

Note:

The label 60% represents the first record of data in the bound data field.

For details, you can download the template Liquid-Fill Chart.cpt.