KPI Card
widget allows you to measure trends through key performance indicators (KPIs) like value and goal. The key metrics such as revenue vs investment, target vs current value, and stocks vs demand are generally displayed in the KPI Card widget.
The visualization of the KPI card widget is customizable, and you can format the values displayed in the widget using the provided options.
KPI Card series view:
KPI card single view:
KPI card single view without actual and target values:
NOTE: Before adding the card widget to the design layout, make sure to create the data source. You can refer to this section to learn how to create a new data source.
IMPORTANT: To showcase a KPI Card, a minimum requirement of both actual and target values is needed.
After creating a data source, follow the given steps to configure the data into the card widget:
Drag the KPI Card
control icon from the tool box into the design panel. You can find the control in the tool box by search.
Resize the widget as required.
Click the properties
button as shown in the following image.
Now, the properties pane
opens.
Click ASSIGN DATA
. The data pane will be opened with the list of available measures
and dimensions
from the added data sources.
Drag the required field into the Actual Values
section.
You can change the aggregation type
, filter
, and format
the data using the options provided in the settings menu. To open the settings
menu, click the settings
icon.
Now, the menu will be shown.
Changing the aggregation type: You can change the summary type of the dropped measure field by clicking the summary types listed in the menu. Refer here for more details on aggregation types.
Measure filtering: You can use “Filter” option to filter the data by specifying the filter condition. Refer the detailed steps on applying measure filter from this page.
Measure formatting Select “Format” option to define the display format to the values in the column through Measure Formatting window. To learn about measure formatting refer here.
Drag the required field into the target value
section.
Now the KPI card widget will be rendered.
NOTE: The measure formatting option is not provided in the Target Value’s settings menu and the measure formatting applied for the actual value will also be applied to the target value.
Drag a dimension field into the series section to render a series of KPI Cards.
Now, the KPI card will be rendered as shown in the following image.
You can filter and sort the records using the settings menu items.
Sorting: You can customize the sorting behavior of dimension fields in the KPI Card widget. You can order them based on alphabet or value, data source (default), or field. Refer to here for the detailed steps.
Refer to this page to learn how to apply measure filter.
Filtering: You can use the “Filter” option to filter the data by specifying the filter condition.
Refer to this page to learn how to apply measure filter.
You can use the Sparkline section to showcase the variation of measurement in the KPI Card widget.
The image
section allows you to configure the image data for each KPI card/records. The image data may be the direct URL for the records or contains a part of the URL.
In the following example, each country flag is displayed in the KPI card by configuring the Country Image field. The Country Image column from the data source contains the full URL of the country flag.
Data screenshot
Follow the given steps to show the country image in the KPI card series:
Configure the Country Image
field into the Image
section.
Make sure whether the pattern
text is properly updated in the Properties
pane image section.
Now, the widget will be rendered with image data.
If your data source contains the partial data of the URL means you need to enter the URL text with the proper patterns.
For an example, consider the following data source.
It contains the Players name and part of their image URL in the above columns.
The full image URL for Cristiano Ronaldo
is https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cristiano_Ronaldo_2018.jpg/345px-Cristiano_Ronaldo_2018.jpg
and the Player Image Column contains the information is commons/thumb/8/8c/Cristiano_Ronaldo_2018.jpg/345px-Cristiano_Ronaldo_2018.jpg
. So you need to enter the URL as https://upload.wikimedia.org/wikipedia/{0}
Where the {0} indicates the first field in the Image
IMPORTANT: 1) You can add any number of fields in the image section and need to append {0}, {1} for the first , second fields configured in the image section. IMPORTANT: 2) If more than one data is available for the record the first record with the highest measure will be used to display in the KPI Card widget.
For example, if you try to show the goals of each team and configure the player image in the image section, it will show top scorer image off each team as shown in the following screenshot.
Configure Image section:
Ensure pattern
Series view
NOTE: The image will be hidden automatically if the width of the KPI card is low. An information icon will display the image as highlighted in the following image.
Like the image option, you can configure the background image of the KPI Card.
You can format the KPI Card for better illustration of the view through the settings available in the Properties tab.
To format the KPI card, follow the given steps:
This option allows you change the title for the KPI card.
Allows you provide subtitle for the KPI card.
NOTE: Subtitle will be shown only when the series section is configured.
Allows you provide description about the KPI Card.
KPI card with the title.
KPI card with the customized subtitle and description
You can set the value label status to High is Good or Low is Good. The default setting is High is Good. This option is enabled only when you configured the actual value and target value.
From the provided color pickers, you can customize the color values for the high, medium and low colors.
Allows you to change the separator color.
The objective of this option is to make the font size readable in higher resolution. By enabling Auto Font Size
, the font size will vary based on resultant font size, view port width, and Scaling Factor
calculation.
The following image depicts the behavior of Auto Font Size
across different resolution.
Allows you to choose whether the title needs to be shown or not in the KPI Card.
The following screenshot shows the KPI card after hiding the title.
You can enter the value for the KPI card title.
Allow you to choose the KPI Card title value color.
You can customize the font size of the KPI card title.
Figure: KPI card with customized title color and font size.
This section will be enabled only if we configure the KPI card with series section.
By default, the card layout is adjusted implicitly, based on the size of the container and the number of cards.
In the following image, Fixed Rows and Columns
is in disabled state. So, the card is arranged in 7 x 3 to fit the 21 cards without any gaps in the container.
By enabling the Fixed Rows and Columns
, you can define the number of rows and columns and it will be maintained even, if you resize the container.
The following image shows the customized layout of KPI card series.
Note If the resultant value of rows x columns exceeds the total number of cards, the layout will reset to default and the content of card will hide, if you try to fit the more number of cards in a smaller container. You can rectify this either by adjusting the font size of the elements or by increasing the number of rows and columns.
Allows you to turn on or off the visibility of the KPI value in the KPI card.
The type drop-down allows you to choose the value which needs to be shown as the KPI value. The available options are:
Figure: KPI card with different KPI types.
Allows you to customize the KPI value color.
Provides the option to change the KPI value font size.
Allows you to toggle the visibility of icons for the KPI values.
Provides the option to customize the icon colors.
Direction color: The colors from the direction settings will be applied.
Custom color: From the provided color pickers, you can customize the color values for the High, Medium and low colors.
You can customize the indicator for the high, low and neutral
values from the set of different indicators.
Figure: Selecting the shape for the indicators.
Figure: After customizing the indicator
Provides the option to change the font size of the indicators.
The type drop-down allows you to choose the value which needs to be shown as the left side value. The available options are.
Allows the options to toggle the visibility of the left value.
Provides the option to customize the left value colors.
Direction color: The colors from the direction settings will be applied.
Custom color: From the provided color pickers, you can customize the left value color.
The option to change the left value font size.
Allows you to choose whether to show the caption for the left value or not.
Provides the option to modify the caption for the left value.
Provides the option to customize the left value caption colors.
Direction color: The colors from the direction settings will be applied.
Custom color: From the provided color pickers, you can customize the left value caption color.
The option to change the left value caption font size.
The type drop-down allows you to choose the value which needs to be shown as the right-side value. The available options are.
Allows the options to toggle the visibility of the right value.
Provides the option to customize the right value colors.
Direction color: The colors from the direction settings will be applied.
Custom color: From the provided color pickers, you can customize the right value color.
The option to change the right value font size.
Allows you to choose whether to show the caption for the right value or not.
Provides the option to modify the caption for the right value.
Provides the option to customize the right value caption colors.
Direction color: The colors from the direction settings will be applied.
Custom color: From the provided color pickers, you can customize the right value caption color.
The option to change the right value caption font size.
Provides the option to change the visibility of the image within the KPI Card widget.
Allows you to choose the image mode.
Default - Displays the image in its original size.
Fill - Fills the image in the available space.
Uniform to fill - Fills the image uniformly in the space. But, the image gets clipped, if it is larger than control.
Uniform - Sets the image size proportionally (without clipping) to fit to the widget area.
Provides three different options to select the image source:
Provides the option to change the visibility of the background image within the KPI Card widget.
Allows you to choose whether the background needs to apply for the whole KPI Card or except the image data.
You can find the difference from the following images.
KPI background
Complete
Allows you to choose the image mode from the options Default, Fill, Uniform to fill, and Uniform.
Provides the following three different options to select the image source.
Allows you to choose the background color for the KPI Card widget.
NOTE: If both the background image and background color are enabled in the widget, then based on the transparency of the background image and the selected image mode, either the background image alone will appear in the widget or both the background color and image will appear in the KPI Card.
You can change the transparency of the color.
Provides the option to choose whether to show the sparkline in the KPI Card or not.
Allows you to customize the sparkline color in the KPI Card.
You can change the opacity of the sparkline color.
You can enable linking and configure to navigate to a general URL with or without parameters. For more details, refer to linking URLs.
The KPI Card widget can be set to act as a master widget by checking the Act as Master Widget
check box. Enabling the Ignore Filter Actions
check box, enable the KPI card widget not to be filtered by any other master widgets during the interaction time in both preview and published modes.
NOTE: Act as Master Widget check box will be enabled only when the Series section is configured.
Allows you handle the alignment of widget title to either left, right, or center.
Allows you apply the text color to the widget title.
Allows you toggle the visibility of border surrounding the widget.
Allows you apply the specified radius to the widget corners if the Show Border property is enabled. Value can be set between 0 and 10.
Allows you to enable or disable the maximized mode of the KPI Card widget. The visibility of the maximize icon in the widget header will be defined based on this setting. Clicking this icon in the viewer will show the maximized view of the KPI Card widget.
Allows you to enable or disable the CSV export option for the KPI Card widget. Enabling this allows you to export the summarized data of the widget view to CSV format.
This allows you to enable or disable the Excel Export option for the KPI card widget. Enabling this allows you to export the summarized data of the widget view to (.xlsx or .xls) format.
This allows you to enable or disable the Image Export option for the KPI card widget. Enabling this allows you to export the view of the widget to image format (.jpg), (.png), or (.bmp) in viewer.
Allows you to enable or disable the Excel Export option for the KPI Card widget. Enabling this allows you to export the summarized data of the widget view to (.xlsx or .xls) format.
Allows you to enable or disable a comment for the dashboard widget. For more details refer to here.
This allows you to visualize the raw data associated with a widget at runtime.
The color of the various properties in the KPI card can be customized from the corresponding properties section as explained in the formatting section. This will apply the same color for all records when rendered in a series.
In case, if you have the requirement to highlight any data based on some conditions, you might be required to enable the advanced formatting option.
In the properties pane, check the Advanced Setting
check box provided under the formatting
section.
This will open the Conditional Formatting
dialog.
You can customize more than one property using the rule based conditional formatting.
You can choose the field from the Based On section to apply the conditions from the highlighted drop-down.
You can select the summary type for the selected measure field.
The value type drop-down allows you to choose whether you are going to apply the direct value (specific number like 3 goals, order ID 10248 ) or percentage (values above 30% or 50 %).
You can give a meaningful name to the applied conditions using the highlighted text box.
Choose the condition for measure field from the highlighted conditions.
If you have selected the dimension as a based on field and want to use text condition, the following text-based conditions are available.
NOTE: The text-based condition type will be enabled only when the dimension configured in the series field is used as the based on field.
Enter the condition value.
Allows you to choose the title font style. (Bold, Italic, Underline, and Superscript).
For the dimensions, case sensitive option is provided to choose whether the entered value is case sensitive or not.
Select the checkbox provided near by the options to customize the properties, similarly click on the font style icons for applying them like shown in the following screenshot.
Figure: The conditional formatting window with applied conditions.
Figure: The KPI card series view with the applied conditional formatting.
Blog post - https://www.boldbi.com/blog/turn-on-insights-using-the-right-card-widget