webinar banner Creating a Dashboard in 5 Minutes or Less with Bold BI - Thursday, March 25, 10 A.M. ET. SIGN UP NOW

Embed Powerful Analytics and Business Intelligence Everywhere

Turn on Insights Using the Right Card Widget

Turn on Insights Using the Right Card Widget

Share this blog

Be the first to get updates

    Subscribe RSS feed
    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.

    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 a KPI Card
    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 Showing Revenue Comparison
      KPI Card Showing Revenue Comparison
    • Tracking website visitors (current month versus last month).

      KPI Card Showing Website Visitors Detail
      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 Widget
      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
      Editing the Data Source
    3. In the data source designer, click on the expression editor in the toolbar.

      Expression Editor
      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

      Adding the Expression Fields
      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. If you are new to Bold BI, get started with Bold BI by signing up for a free 15-day trial and create more interactive business intelligence dashboards.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Live Chat Icon For mobile
    Hugo Morris

    Chat with the Bold BI Sales team now!

    Live Chat Icon