How do I create a Number Card Widget?

Published:

Getting Started with a Number Card Widget

If you are a Bold BI Cloud user, log in to your cloud site account. Else if you have Bold BI installed in your server, open the Bold BI application from there.

Click the "Plus" icon in the left side banner as shown in the following image.

After clicking on it, the "Create Dashboard" menu will open. Click on the "Start from Scratch" option.

Enter the dashboard's name and click "Add and Design" to navigate to the dashboard designer.

Now, the dashboard designer page will be open as follows.

A new window will open to add a new data source. To do so, click "Data sources" on the right side of the designer page.

Bold BI offers a wide range of sample data sources to choose from.

The "Northwind Traders Sales Analysis" data source has been selected for this dashboard

. To add your preferred data source, select it and click on "Add."

Adding the Number Card Widget

Once you have chosen a data source, start selecting widgets. One of the widgets available in Bold BI is the "Number Card" widget. For this article, a number card widget is going to be created.

The Number Card widget allows you to display a single numeric value or a series of measure values from a dataset. The widget offers customization options for appearance, such as font, color, style, Background image and color, and more.

Locate the "Card" section in the widget menu, usually on the dashboard designer's left side. After finding the Number Card widget, drag it onto your dashboard canvas. Position the widget wherever you want it on the canvas. To resize the widget, hover your cursor over one of the edges or corners of the widget until you see a resized cursor. Click and drag the edge or corner to adjust the widget's size, making it easier to read. Release the mouse button when you're satisfied with the widget's size.

Assigning Data to the Number Card Widget

To assign data to the Number Card widget in Bold BI Widget, follow these steps:

Select the Number Card widget on your dashboard designer.
Click "Settings" in the upper right corner of the widget to open the widget configuration panel.
In this panel, you will see different tabs. Click on the "Assign Data" tab.
On the left column of this tab, you will find a list of available fields categorized as "Measures" and "Dimensions."
Select the desired field(s) from the left column by clicking and dragging them.
Next, drag the selected field(s) to the "Measure" section and the "Series" section in the right column, depending on the type of data you want to display.
- If you want to display a single numeric value, drag a measure field from the "Measures" section to the "Measure."
- If you want to display a summarized value based on different categories or series, drag a field from the "Dimensions" section to the "Series."
Once the field(s) are assigned to the appropriate section, the Number Card widget will be rendered with the data you configured.

Customizing the Number Card Widget

To customize the Number Card widget in Bold BI, utilize the configuration options available in the widget settings. Here are some common customization options that can be explored.

Widget Appearance: The visual appearance of the Number Card widget can be modified, including font size, font color, background color, border style, and more.
Number Formatting: The displayed number can be formatted according to personal preferences. This includes options to specify decimal places, apply currency symbols, add a thousand separators, and choose different number formats (such as percentage, Currency, and Number).
Conditional Formatting: Conditional formatting can be applied to the Number Card widget to change the appearance based on a specific condition. For instance, different font colors or background colors can be set based on particular threshold values or data ranges.