KPI indicator card

1. Overview

1.1 Version description

1.2 Application scenario

The KPI indicator card is a component for visualizing KPI values, which can directly display the values of selected fields, such as sales, gross profit, gross margin, etc. The effect is shown in the following figure.

1.3 Basic requirements

Basic requirements for KPI indicator cards：

1.4 Chart Features

• Pros: Good for highlighting important indicators.

• Disadvantage: Only text can be displayed.

2. Example

2.1 Create a component

1）Click on the dashboard Tab, select New dashboard, and click OK, as shown in the following figure.

2）Click add component, select FRDemo_ORDERS under SALES, and click OK, as shown in the following figure.

3）Drag the "AMOUNT" under the dimension of the region to be analyzed into the vertical axis as shown in the following figure.

Note: The indicator value of the dragged-in "indicator" cannot be empty, otherwise the KPI indicator card will not take effect.

4）Under Chart type, select KPI indicator card.

After selecting this chart type, the indicator items in the vertical axis will be switched to the text column under Graph Properties, and the AMOUNT field in the chart preview will be switched to the KPI indicator card display, as shown in the following figure.

2.2 Set text format

1）The text can be formatted manually by clicking on the text field and using the rich text editor.

2）The rich text editor provides automatic styles and also supports custom styles, which can set font, font size, alignment, and other effects for text.

Note: Text alignment is a new feature added in version 5.1.10. The text in previous versions was centered by default.

For example, if you need to change the text field "AMOUNT" to "Total Contract Amount", you only need to change the field "AMOUNT" to "Total Contract Amount" in the "Text Field", as shown below.

In addition to the above text formatting, more style attributes can be set in the graph properties, see: Graph Properties

You can also set the legend, gridlines, background, adaptive display, etc. of the component, see: Chart Component Styles for details

2.3 Switch fields

If you need to switch the indicator card display field, drag away the original field directly and drag in the field you need to select, for example, you need to switch the "AMOUNT" field to "PAID AMOUNT", as shown in the following figure.

Note: For versions before 5.1.12, the field names of the indicator cards remain after the fields are dragged away, so you need to manually enter the text field edit screen to modify them.

3. Effect view

Select the corresponding dashboard, click Preview, and the chart is shown in the following figure.

4. Cautions

4.1 Incomplete display of indicator card content

Go to the dashboard edit or preview screen and the chart is shown below.

The problem can be solved in three ways: adjusting the adaptive display of the component, reducing the font size of the text, and increasing the size of the component display.

1）Adjust adaptive display to overall adaptation.

Go to component style>adaptive display and set it to overall adaptive, the text content will automatically adjust with the size of the component in the dashboard. The following figure shows.

2）Enlarge the component display.

First, enter the edit dashboard interface. If you are in the dashboard preview interface, you can click edit dashboard to enter the target interface, as shown in the following figure.

Then, select the indicator card component and drag the component border to the outside to enlarge the component display interface and adjust it to the appropriate size, as shown below.

3）Reduce the text font size.

First, go to Graph Properties > Text and click on the text content AMOUNT (summation). The interface automatically pops up the content format, click the bottom right corner make edits. As shown in the figure below.

Then, in the edit text interface font style select custom, click the font size drop-down box, according to the need to reduce the size of the display text. Click OK after completing the operation. As shown in the figure below.