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.
To showcase a Number Card
, a minimum requirement of one measure
value is needed.
The following procedure illustrates data configuration of the card:
Number Card
control icon from the tool box into the design panel. You can find the control in the tool box by search.Data Sources
icon in the configuration panel.CREATE NEW
to launch a new connection from the connection-type panel.Microsoft Excel
connection type is selected for demonstration.NEW DATA SOURCE
configuration panel, enter the required details.Preview & Connect
. Now, the Choose Table(s)
dialog will be shown.Connect
.Save
.Now, the data source is successfully created.
Properties
icon in the configuration panel.The properties panel of the widget will be displayed as shown in the following screenshot.
ASSIGN DATA
tab.The data pane lists the available measures
and dimensions
from the data source.
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
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.
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.
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.
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:
Now, the widget will be rendered with 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.
Like the image option, you can also configure the background image
of the Number Card.
To format the properties of the Number Card widget, switch to the PROPERTIES
tab.
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.
This option allows you to toggle the visibility of tooltip in a 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.
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.
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.
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.
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.
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 next to the options to customize the properties, and similarly click Font Style
icons to apply them, as shown in the following screenshot.
This option allows you to place the content of the widget at the position of Left,Center and Right.
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.’
By enabling Auto Font Size option, the font size will be adjusted automatically, if the resolution of the screen varies.
If the auto font size is enabled, scaling factor allows you to increase or decrease the font size.
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.
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.
You can customize the font size of the number card title by unchecking Auto Font Size
.
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.
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.
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.
You can customize the font size of the number card title by unchecking Auto Font Size
.
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 enabled only when you configure the series in Assigned Data
tab.
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.
By enabling row count
, you can set the row 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.
It animates the measure values when you enable the Enable Animation
.
This animation-duration property specifies how long the animation cycle should last. And the time is specified in seconds or milliseconds.
If the Show Image check box is unchecked, then the image is not displayed in the Number Card.
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.
You can browse the image from the local system.
You can enter the direct URL of the image.
You can use the pattern as explained in the Image data section.
The background image properties are same as the Number card’s image properties.
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 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.
You can enable linking and configure it to navigate to a general URL with or without parameters. For more information, refer Linking.
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.
You can create fixed measure value in Number Card using expressions.
The following steps illustrates how to add the fixed value:
fx expression
in the Data Source.Save
.Value(s)
section.Fixed Value for Number card
This allows you to handle the alignment of widget title to either left, center, or right.
This allows you to apply the text color
to the widget title.
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.
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.
This allows you to toggle the visibility of border surrounding the widget.
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.
This allows you to enable or disable the widget title of the number card widget.
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.
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.
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.
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.
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.
This allows you to enable or disable comment for the dashboard widget. For more details, refer to this link.
This allows you to visualize the raw data associated with a widget at runtime.
This allows you to pin the widget.
Blog post - https://www.boldbi.com/blog/turn-on-insights-using-the-right-card-widget