Card

Card allows you to measure trends through key performance indicators (KPIs) like value and goal.

Card

How to configure table data to card widget?

To showcase a card, a minimum requirement of 1 actual and/or target values is needed.

The following procedure illustrates data configuration of card.

Drag and drop Card control icon from the Tool box into design panel. You can find control in tool box by search.

Card drag

Click Data Source button in configuration panel.

Data button

Click CREATE NEW button to launch a new connection from connection type panel.

Data source button

In the connection type panel, click any one (Here Microsoft SQL Connection type is selected for demonstration) of the listed connection type button shown.

Data source list

In the NEW DATA SOURCE configuration panel, fill the connection type and related details. Click Connect button

Connect button

Drag your preferred table or view from the left pane from data design view, click Save button.

Virtual table

Click Properties button in configuration panel, property pane opens. Now, Switch to ASSIGN DATA tab.

Designer properties button

Card data tab

The data tab will be opened with available measures and dimensions from the connected data source

Card assign data

Bind column through drag and drop element from Measures section to Actual Values.

Card

Drag and Drop the elements to Target Values.

Card

You can use aggregate function to change the Actual Values of the card.

Card

You can use Filter option to filter the data by specifying the filter condition. For more details, refer filter.

Card

You can format the data to be displayed in the card by using format option. For more details, refer measure format

Card format

You can the change the Target values by selecting aggregate function.

Card

You can use Filter option to filter the data by specifying the filter condition. For more details, refer filter.

Card

Drag and Drop the elements from sections to Series.

Card

You can change the Series value of the card by changing the setting.

You can apply filter and sort option for the series field, if required.

You can clear filter by selecting Show All Records for Series section.

Here is an illustration for series card,

Card series

How to format card widget?

You can format the card for better illustration of the view that you require, through the settings available in Properties tab.

General Settings

General settings

Name

This allows you to set title for this card widget.

Basic Settings

Basic settings

Title

You can set a custom name as card title.

Title Alignment

The title can be aligned left, center, or right.

Title Color

The color of title text can be customized.

Subheading

A Subheading can be added to the card control providing a suitable text. Subheading text will be displayed at the bottom of the title text.

Subtitle Foreground

The text color of subtitle text can be customized.

Value Alignment

You can customize the card value alignment.

Actual Value Foreground

You can customize the color of card value.

Secondary Value Type

This allows you to set the Secondary Value Type based on the Variation and Target Value.

Actual Value Prefix

This allows you to set the actual value prefix.

Behavior Settings

Behaviour settings

High Value is Good

The card visualization can be customized through specifying whether higher value should be treated as good or bad.

Show Indicator Only

Enabling this allows you to show indicator representation alone in card. This option will be available only if columns are added to both Actual Values and Target Values sections.

Primary Value Type

Primary value type

This allows you to customize the data showcased in card control by switching the available Primary Value Types.

  • Absolute difference
  • Percent of difference
  • Percent of target
  • Actual Value
  • Percent of Change

Absolute difference

Absolute difference = Actual Value – Target Value

Percent of difference

Percent of difference = [((Actual Value - Target Value) / ([Actual Value / Target Value]/2)) * 100]

Percent of target

Percent of target= [([Actual Value / Target Value] * 100)]

Percent of Change

Percent of Change = [((Actual Value - Target Value) / Target Value) * 100]

Filter

Filter

Act as Master Widget

This allows you to define this widget as a master widget such that its filter action can be made to listen by other widgets in the dashboard.

NOTE

For single card, you can cannot enable Act as Master Widget option.

Ignore Filter Actions

This allows you to define this widget to ignore responding to the filter actions applied on other widgets in dashboard.

Link

Link

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

Container Appearance

Container Setting

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 text color to the widget title.

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. Value can be between 0 and 10.

Show Maximize

This allows you to enable/disable the maximized mode of this card widget. The visibility of the maximize icon in widget header will be defined based on this setting. Clicking this icon in viewer will show the maximized view of the grid widget.

CSV Export

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

Excel Export

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

Image Export

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

NOTE

Maximize and Export options are not available in the single card.

Enable Comments

This allows you to enable/disable comment for dashboard widget. For more details refer here

How to apply conditional formatting?

Color of elements in card widget can be customized using conditional formatting support which is available in the properties section of the card widget. This will allow the user to improve the visualization in card and to distinguish the data based on conditional range values that will let the visualizer to understand what is shown in data.

Color settings

Advanced Settings

This allows you to provide colors for the selected measure based on single or multiple conditions available.
You can choose a card color using multiple condition sets such as Greater than, Less than, Equal to, Not Equal to, Between, Not between, Greater than or equal to, Less than or equal to.

Configure color

As shown in the above image, there are three color pickers namely Range, Background and Title that will allow us to choose the colors for primary value and indicator, card background and title respectively.

On clicking the save button, color will be applied based on the conditions configured.

Card with color

NOTE

The card widget need to be configured with actual and target values to apply the conditional formatting. Since, the color is customized based on the primary value.