I. Overview
The KPI card can be used to conspicuously show the values of indicators including sales volume, profit, etc. The extended chart provides 3 KPI card charts: Carousel KPI card - flashing, Carousel KPI card – electronic, and Carousel KPI card – particle counter, which use different dynamic effects to display indicators.
| You will learn |
|---|
|
II. Carousel KPI card - flashing
1. Add a Carousel KPI card
1) Click [Floating Element] > [Chart], and select [Extended Chart-KPI card] > [Carousel KPI card - flashing].
2) Adjust the size of the chart
2. Prepare data
1) Create a new DB Query dataset[ds1] and drag the sheet [Sales].
2) The data show sales of each region.
3. Set the “Data” for the chart
1) Set the “Data” for the chart as shown in the figure below. Enter the following into the [Indicator Name] field: Sales Volume
2) The location of these data is as follows under a preview mode:
a) Indicator name
b) Display dimension
c) Indicator value
4. Set range color
1) Select [Style]>[Graphics]>[Range color] >[Custom], and set partitioning and color for 3 ranges as shown in the figure below.
2) After setting of the ranges is completed, the color of the range where the indicator value falls will be displayed.
5. Set the Value format
1) Set the Value format as [Currency], select the [#,##0] from the [Pattern] dropdown, and enter a $ before “#,##0”, with a space between the Pattern and the currency unit.
2) After the Value format is set, the indicator value will be displayed in such a format.
6. Set the frame color
1) The Frame color is “azure” by default, and can be changed to other colors listed in the dropdown. In this example, the frame color remains “azure”.
2) Display effect after the frame color is changed to “purple”
7. Set BG style
1) Click [BG] tab. Similar to cells, the background can be filled with color, gradient color, texture or picture. By default, the background is filled with color. The background color is “black” by default. In this example, the background color remains “black”.
2) Effect after the background color is charged to be “dark green”
8. Final effect
Download template
III. Carousel KPI card - electronic
Note: The setting of Carousel KPI card - electronic is basically same as that of Carousel KPI card - flashing, so it is introduced briefly in this section.
1. Add a Carousel KPI card
1) Click [Floating Element] > [Chart], and select [Extended Chart-KPI card] > [Carousel KPI card - electronic].
2) Adjust the size of the chart.
2. Set the data
1) Set the data for the chart as shown in the following figure with the same dataset as introduced in the previous section. Enter no text into the [Indicator Name] field.
2) The location of these data is as follows under a preview mode:
a) Display dimension
b) Indicator value
3. Set the range color and value format
1) Customize 3 indicator color ranges, and set the value format as [Currency], with the specific format as follows: $ #,##0
2) After the range color is set, the two lines will display the same color as that of the range where the indicator value falls.
4. Final effect
Download template
IV. Particle counter
1. Add a Particle counter
1) Click [Floating Element] > [Chart], and select [Extended Chart-KPI card] > [Particle counter].
2) Adjust the size of the chart.
2. Prepare data
Create a new built-in dataset[ds1] and add a column named [Sales_Volume] (string). Add a row and enter text: 9 Billion
3. Set the data
1) Set the “Data” for the chart as shown in the figure below, and enter the following into the [Title] field. Sales_Volume
2) The location of these data is as follows under a preview mode:
a) Title
b) Count
4. Set the theme color
1) Select [Style]>[Graphics], and set two colors as the theme color, “azure” and “purple” by default. In this example, the theme color remains as default.
2) Effect of default theme color
3) You can also change the theme color and see the effect.
5. Set BG style
Click the [BG] tab to set the Fill field and select opacity. Similar to cells, the background can be filled with color, gradient color, texture or picture. By default, the background is filled with “black”.
Download template
