Configuring and formatting Number card with Bold BI

The Number Card widget is a very useful widget that allows you to showcase a single value or a series of measure values to the users in the dashboard. The key metrics such as total sales amount, number of page visits, current month goal, etc, are generally displayed in the card widgets.

The visualization of the number card widget is customizable, and you can format the values displayed in the widget using the provided options.

a) Single Number Card widget.

b) Series of Number Card widget.

How to configure data into the Number Card widget

To showcase a Number Card, a minimum requirement of one measure value is needed.

The following procedure illustrates data configuration of the card:

1. Drag the Number Card control icon from the tool box into the design panel. You can find the control in the tool box by search.

2. Click Data Sources icon in the configuration panel.

3. Click CREATE NEW to launch a new connection from the connection-type panel.

4. In the connection-type panel, click any one of the listed connection type buttons shown. Here, the Microsoft Excel connection type is selected for demonstration.

5. In the NEW DATA SOURCE configuration panel, enter the required details.

6. Click Preview & Connect. Now, the Choose Table(s) dialog will be shown.

7. After selecting the required tables, click Connect.

8. Drag your preferred table from the left pane to the data design view and click Save.

Now, the data source is successfully created.

9. Click the Properties icon in the configuration panel.

The properties panel of the widget will be displayed as shown in the following screenshot.

10. Now, switch to the ASSIGN DATA tab.

The data pane lists the available measures and dimensions from the data source.

Single number card

Drop the measure field data into the Measure section.

Now, the widget is rendered successfully with the default properties and formatting.

You can change the aggregation type of the measure section from the settings menu as shown in the following screenshot. Refer to this section for more details.

NOTE: Refer to the following sections to learn more about how to filter and format data. NOTE: Measure filter NOTE: Measure Formatting

Series number cards

The Series section allows you to plot a series of cards over the dropped field. In this following example, the team-wise goals are displayed in the card.

Sparkline

You can use the Sparkline section to showcase the variation of measurement in the Number Card widget.

Now, the card will be rendered with the sparkline.

Image

The Image section allows you to configure the image data for each number card/records. The image data may be the direct URL for the records or contains the part of the URL.

Direct URL

In the following example, each country flag is displayed in the number 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 Number card series:

1. Configure the Country Image field into the Image section.

2. Make sure whether the pattern text is properly updated.

Now, the widget will be rendered with image data.

Partial Image data

If your data source contains the partial data of the URL, enter the URL text with the proper patterns.

For 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 commons/thumb/8/8c/Cristiano_Ronaldo_2018.jpg/345px-Cristiano_Ronaldo_2018.jpg. So, you should enter the URL as https://upload.wikimedia.org/wikipedia/{0}, where the {0} indicates the first field in the image section.

NOTE: - You can add any number of fields in the image section and need to append {0}, {1} for the 1st, 2nd fields configured in the image section.

NOTE: - If more than one data is available in the record, the first record with the highest measure will be displayed in the Number 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 of each team as shown in the following screenshot.

Configure Image Section

Update Image Pattern

Final view

NOTE: The image will be hidden automatically, if the width of the number card is low. An information icon will display the message as highlighted in the following image.

Background image

Like the image option, you can also configure the background image of the Number Card.

How to format the Number Card widget

To format the properties of the Number Card widget, switch to the PROPERTIES tab.

General properties

The following highlighted section in the image allows you to modify the widgets name, subtitle, and to add useful description.

The following screenshot shows the Number Card widget, after modifying the header properties.

Basic Settings

Show Tooltip

This option allows you to toggle the visibility of tooltip in a card.

How to apply conditional formatting in Number card

By enabling the advanced settings in formatting , you can customize the color, styles, and highlighting of the data based on the conditional range values.

How to enable advanced formatting

In the properties pane, check the Advanced Setting check box provided under the formatting section.

This will open the Conditional Formatting dialog.

Properties

You can customize more than one property using the rule based conditional formatting.

• Title
• Background
• Sparkline (Applicable only when sparkline is configured)
• Icon
• Icon color
• KPI Value
• Image
• Background image

Based on field

To apply the conditions from the highlighted drop-down, choose the field from the Based On section. The drop-down contains the columns present in the data source.

Summary type

You can select the summary type for the selected measure field.

Value type

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 %).

Condition name

You can give a meaningful name to the applied conditions using the highlighted text box.

Condition type

Choose the condition for measure field from the highlighted conditions.

The following text-based conditions are available, if you have selected the dimension as a based on field and want to use text condition.

**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.

Value

Enter the condition value.

Font style

Allows you to choose the title font style. (Bold, Italic, Underline, and Superscript).

Case sensitivity

For the dimensions, case sensitive option is provided to choose whether the entered value is case sensitive or not.

Select the checkbox next to the options to customize the properties, and similarly click Font Style icons to apply them, as shown in the following screenshot.

Appearance settings

Horizontal alignment

This option allows you to place the content of the widget at the position of Left,Center and Right.

Vertical alignment

This option allows you to customize the alignment of the number card vertically. This dropdown option has Top, Center, and Bottom values. By default, the alignment value is set to ‘Center.’

Auto font size

By enabling Auto Font Size option, the font size will be adjusted automatically, if the resolution of the screen varies.

Auto font size at 3840 x 2160

Auto font size at 1366 x 768

Auto font size at 1920 x 1080

Scaling factor

If the auto font size is enabled, scaling factor allows you to increase or decrease the font size.

Measure properties

Show Measure

You can also toggle the measure card visibility in the Number Card widget by using the Show Measure check box.

From the measure property section, you can customize the font size and color of the measure values displayed in the Number Card widget.

The following image shows the Number Card widget, after modifying the color and font size of the measure value.

Measure hidden

Auto Font Size

On enabling this property, the font size of the number card measure varies based on the screen resolution.

Use Case:

If we have created a dashboard with a number card that can be viewed by different clients of different screen resolutions, and we want the measure to be adjusted with respect to their resolution, then we can use this option.

Auto font size at 3840 x 2160

Auto font size at 1366 x 768

Auto font size at 1920 x 1080

Font size

You can customize the font size of the number card title by unchecking Auto Font Size.

Title properties

You can customize the font color and size of the title. You can also enable or disable the title.

The following image shows the Number Card widget after modifying the color and font size of the title value.

The following image shows the Number Card widget after unchecking the title value.

Title for single card

You can customize the font color and size of the title. You can also enable or disable the title and you can edit the title.

The following image shows the Number Card widget after modifying the color and font size of the title value.

Auto Font Size

On enabling this property, the font size of the number card title varies based on the screen resolution.

Use Case:

If we have created a dashboard with a number card that can be viewed by different clients of different screen resolutions, and we want the title to be adjusted with respect to their resolution, then we can use this option.

Auto font size at 3840 x 2160

Auto font size at 1366 x 768

Auto font size at 1920 x 1080

Font size

You can customize the font size of the number card title by unchecking Auto Font Size.

Text Wrap

This option allows you to wrap Card Title based on ‘Card size ’.This option will be enabled only for single card. It wraps title only, if the space is not enough to show title in single line.

If card height is not enough to wrap title further it will trim the title.

If the title doesn’t contains space between words, it will not wrap.

Series settings

Series settings enabled only when you configure the series in Assigned Data tab.

Fixed rows and columns

If you enable the Fixed rows and columns, you can customize the rows and columns. The rows and columns are fixed based on the container size and the card size of the number card.

Row count

By enabling row count, you can set the row count.

Column count

By enabling the Column Count, you can set the column count.

Note: If the invalid columns and rows are given , the rows and columns reset to its default value. For example : If you given the number of rows as 6 and number of columns as 5 but your data count is only 20 . In this case the rows and columns will reset to its default value.

Animation settings

Enable animation

It animates the measure values when you enable the Enable Animation.

Animation duration

This animation-duration property specifies how long the animation cycle should last. And the time is specified in seconds or milliseconds.

Image properties

Show Image

If the Show Image check box is unchecked, then the image is not displayed in the Number Card.

Image Mode

You can customize the image showcase style through the ode setting.

Default: The image will be displayed in its original size.

Fill: The image will be filled in the available space.

Uniform to fill: The image will be uniformly occupying the space but gets clipped, if it is larger than control.

Uniform: The image sizes proportionally (without clipping) to best fit to the widget area.

Different Modes of Image

Image

Browse Image

You can browse the image from the local system.

URL

You can enter the direct URL of the image.

Pattern

You can use the pattern as explained in the Image data section.

Background properties

Background Image

The background image properties are same as the Number card’s image properties.

Background color

Allows you to set a solid color as the background and to change the transparency of the color.

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 Number Card.

Sparkline properties

Sparkline in the Number Card widget can be turned off by unchecking the Show Sparkline check box. The color of the sparkline and the transparency can be customized using the provided options.

Link

You can enable linking and configure it to navigate to a general URL with or without parameters. For more information, refer Linking.

Filter interaction properties

The Number Card widget can be set to act as a master widget by selecting the Act as Master Widget check box. Enabling the Ignore Filter Actions check box, enable the Number 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.

Number card with fixed measure

You can create fixed measure value in Number Card using expressions.

The following steps illustrates how to add the fixed value:

1. Click the fx expression in the Data Source.

2. Add the name and expression, then click Save.

3. You can view the added value in the measure section in the assigned data tab. Drag the added measures in the Value(s) section.

4. Change the aggregation type to Min or Max.

Fixed Value for Number card

Container appearance

Title alignment

This allows you to handle the alignment of widget title to either left, center, or right.

Title color

This allows you to apply the text color to the widget title.

Title Auto Font Size

On enabling the Auto Font Size, the font size of the title will be adjusted automatically if the resolution of the screen varies.

Font Size

This allows you to apply the specified font size to the widget title, if the Title Auto Font Size is disabled. The value can range between 10 and 44.

Subtitle Auto Font Size

On enabling the Auto Font Size, the font size of the subtitle will be adjusted automatically if the resolution of the screen varies.

Font Size

This allows you to apply the specified size of the font to the widget title, if the Subtitle Auto Font Size is disabled. The value can range between 10 and 32.

Show Border

This allows you to toggle the visibility of border surrounding the widget.

Corner Radius

This allows you to apply the specified radius to the widget corners, if the Show Border is enabled. The value can range between 0 and 10.

Container actions

Show header

This allows you to enable or disable the widget title of the number card widget.

Allow maximize view

This allows you to enable or disable the maximized mode of the number card widget. The visibility of the maximize icon in the widget header will be defined based on the setting in the viewer.

Allow CSV export

This allows you to enable or disable the CSV export option for the number card widget. Enabling this allows you to export the summarized data of the widget view to CSV format in the viewer.

Allow Excel export

This allows you to enable or disable the Excel export option for the number card widget. Enabling this allows you to export the summarized data of the widget view to (.xlsx or .xls) format in the viewer.

Allow image export

This allows you to enable or disable the image export option for the number card widget. Enabling this allows you to export the view of the widget to image format (.jpg), (.png), or (.bmp) in the viewer.

Allow PDF export

This allows you to enable or disable the PDF export option for the number card widget. Enabling this allows you to export the view of the widget to pdf format in the viewer.

Enable comments

This allows you to enable or disable comment for the dashboard widget. For more details, refer to this link.

Allow Viewing of underlying data

This allows you to visualize the raw data associated with a widget at runtime.

Pin widget

This allows you to pin the widget.

Related links

Blog post - https://www.boldbi.com/blog/turn-on-insights-using-the-right-card-widget