Turn on Insights Using the Right Card Widget

Turn on Insights Using the Right Card Widget

A card widget is a flexible and extensible way to display key metrics in a dashboard. Often you will need a simple container to showcase the most important key metrics in a way that everyone can easily understand. A card widget offers this simplicity to display data in an elegant way.
From version 2.8.14, Bold BI offers two types of card widgets: KPI card and number card. You can find these card widgets in the widget panel of the dashboard designer. Let’s look at these card widgets in detail and see how to choose one for your requirements.

Toolbox image showing the Card Widgets in Bold BI
Card Widgets in Bold BI

KPI card

A KPI card can be used to compare values using a formula. It can be either two completely different values or the same value at two different times. The following image shows the structure of a KPI card with all its integral elements.

Structure of the KPI Card Widget
Structure of a KPI Card

Here are some examples of typical use cases of the KPI card.

  • Comparing actual sales revenue and a target.

    KPI Card Example Showing the Revenue Comparison
    KPI Card Showing Revenue Comparison
  • Tracking website visitors (current month versus last month).

    KPI Card Example Showing the Website Visitors Details
    KPI Card Showing Website Visitors Detail

Configuring the KPI card

To configure a KPI card, you will need two numeric values: an actual value and a target value. This is the step-by-step process to configure a KPI card:

  1. Drag and drop the KPI card from the widget toolbox and resize it according to your layout.

    Drag and Drop the KPI Card Widget to Configure it in the Designer Canvas.
    Drag and Drop the Widget
  2. In the configuration panel, select Assign Data.
  3. In the Assign Data section, drag your actual value and the target, goal or comparison value to the Actual Value and Target Value sections, respectively. The KPI card will be configured as shown in the following image.

    Configuring the KPI Card
    Configuring the KPI Card

In the properties panel, you can change the KPI formula. Bold BI has built-in support for formulas to compare the actual and target values. The available formulas are:

  • Percent of Target
  • Percent Change
  • Absolute Difference
  • Percent of Difference
Modifying the Comparison (KPI) Formula
Modifying the Comparison (KPI) Formula

You can modify other properties, such as card title, actual and target value captions, font size, and color in the properties panel.

Using the KPI card to compare values over a period

The KPI card can also be used to compare a value over two different periods (e.g., current month versus last month). Let’s see the step-by-step procedure to achieve this requirement.

In my data, I have two fields, Order Quantity and Order Date. Using these two fields, let’s see how to prepare a KPI card to show the difference in the order quantity over two months.

  1. For the KPI card, we need a minimum of two measures, namely actual and target values. In our data, we have only one measure, which is the order quantity. Now, let’s create expression fields for order quantity for the last month and order quantity for the current month.
  2. In the data source panel, click the edit icon on your data source to open the data source designer.

    Editing the Data Source From the Data Source Panel
    Editing the Data Source
  3. In the data source designer, click on the expression editor in the toolbar.

    Expression Editor Tool in the Data Source Designer
    Expression Editor
  4. First, we’ll create an expression to calculate the sum of the order quantity of the current month. Add a new expression in the editor and name it “Order Current Month”. Add the following formula, which basically checks whether the order is from the current month and then returns the order quantity. For all other months, the value will be returned as zero.
    IF(MONTH([Order Date]) = MONTH(TODAY()), [Order Quantity],0)
  5. Then, create an expression for calculating the sum of the order quantity for the previous month. Add a new expression in the editor and name it “Order Last Month”. Add the following formula, which basically checks whether the order is from the previous month and then returns the order quantity. For all other months, the value will be returned as zero.
    IF(MONTH([Order Date]) = (MONTH(TODAY()-1)), [Order Quantity],0)

    Adding the Expression Fields in the Editor
    Adding the Expression Fields
  6. Now that we have the required measures, we can go ahead and configure the KPI card using the values.

    Configuring the Widget
    Configuring the Widget

This is just an example of how to compare values over time. Using the above technique, you can derive your own comparison for any time period, for example, current year versus last year or quarter 1 versus quarter 2.

Configuring a card series

You can also configure the card as a series, as shown in the following image.

KPI Card Configured in a Series
KPI Card Configured in a Series

To configure a card series, you will need a dimension that can be a string or a date field. Drag the dimension to the series section to render the card series. In the case of a date field, you can also configure the aggregation.

Configuring a Card in Series
Configuring a Series

Further, you can sort, filter, and customize the series using the options in the field menu.

Sorting and Filtering the Card Series Elements
Sorting and Filtering

 

Adding a sparkline

Sparklines are used for showing many trends at once as assets of small timelines. A sparkline could be optionally added to the KPI card to show the trend of your metrics. To add a sparkline, drag your date field to the sparkline section and choose the required aggregation.

Configuring a Sparkline in the Card Widget
Configuring a Sparkline

You can also customize the various properties of the sparkline in the properties panel.

Properties Panel Showing the Sparkline Property Settings
Sparkline Properties

 

Configuring images and a background image

Optionally, you can add an image or background image to the card that expresses the KPI’s significance or progress, so the user can easily understand it.

To add an image or background image, you can easily upload an image from your local system, bind a URL from your data, or build a parameterized URL.

Configuring the KPI Card with a Local Image
Configuring with a Local Image

To upload a local image, in the properties panel, select the Local option from the Image drop-down. Now upload your image in .jpeg, .png, .gif, or any other format using the browse image option.

To bind the image URL from your database, select the URL option in the Image drop-down and, in the Assign Data section, drag your field containing the image URL to the corresponding section. The image will be rendered automatically.

Binding the Image URL in Database
Binding the Image URL in Database

To build a dynamic URL using parameters, drag your parameters to the image section. In the properties panel, choose the Image as a Parameterized URL. In the Pattern text box, add your dynamic URL by setting the parameters starting from zero as {0}, {1}, {2}, and so on.

For example, to show the US sales by county, I have added two parameters: state code and county code.

Configuring Image Parameters
Configuring Image Parameters

In the properties panel, I have added the flag URL by setting the parameters: state code {0} and county code {1}.

Configuring Dynamic Image URL
Configuring Dynamic Image URL

 

Flexible layout

The KPI card offers the flexibility to change the layout as needed. Each element in the card can be hidden and made visible only if necessary. For example, you can hide both the actual and target values and show only the KPI, as shown in the following image.

KPI Card Showing Only the KPI Value
KPI Card Showing Only the KPI

You can achieve this by hiding the left and right values (actual and target values) and their captions.

Hiding the Card Elements
Hiding the Card Elements

Similarly, you can move the values (actual, target, KPI) to any position based on your design. You can use the Type drop-down in any of the elements and choose your required value.

Moving the Values to the Various Positions in the KPI Card
Moving the Values Around

Here are some examples of the customized layout.

KPI Card Showing Only the Actual Value and KPI
Showing Only the Actual Value and KPI

 

KPI Card Showing the Actual Value Only
KPI Card with Actual Value Only

 

KPI Card Showing the Actual and Target Values
KPI Card with Actual and Target Values

 

Conditional formatting

The KPI card has complete support for conditional formatting. You can modify the various properties of the elements such as colors, icons, and images based on conditions.

The conditional formatting option is available in the Formatting section of the properties panel. Enable Advanced Setting and add conditions and formatting in the dialog.

Conditional Formatting Settings in the Properties Panel
Conditional Formatting Settings

The conditional formatting dialog even allows you to add a condition based on a completely different field, rather than the one already configured. You can also choose various condition types and formatting as shown in the following image.

Conditional Formatting Dialog
Conditional Formatting Dialog

The following example shows a KPI card configured in a series to show the weather forecast of the week. The images are dynamically configured based on the weather conditions.

KPI Card Configures in Series with Conditional Formatted Image
KPI Card Configured in Series with Conditional Formatted Image

 

Conditions to Insert Weather Images
Conditions to Insert Weather Images

 

Number card

The number card is similar to the KPI card, except that it can be used to show a single numerical value. Unlike the KPI card, the number card doesn’t compare two values. You can configure it to show a single measure. The structure of the number card is given in the following image.

Structure of Number Card
Structure of Number Card

To configure a number card, drag a numeric field to the Measure section in the Assign Data panel as shown in the image.

Configuring a Number Card
Configuring a Number Card

You can also configure the number card as a series and add sparklines, an image, background image, and other formatting as supported in the KPI card.

Conclusion

I hope this blog provided a clear overview on how to configure, customize, and use card widgets in Bold BI to visualize the key metrics. Based on your own requirements, you can choose the one most suited to your needs. If you have any questions, please post them in the comments section. You can also contact us by submitting your questions through the Bold BI website or, if you already have an account, you can log in to submit your support question. Bold BI dashboards now come with a 15-day free trial with no credit card information required. We welcome you to start a free trial and experience Bold BI for yourself.

Start your free 15-day trial today

Leave a Reply

Live Chat Icon For mobile
Live Chat Icon