Card

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

card with value and goal KPIs

How to configure flat table data to Card Widget?

To showcase a card, a minimum requirement of 1 actual and/or target value 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 Toolbox by search.

dragging card from toolbox to design canvas

After control added in design panel, click Assign Data button at Design Tools Pane to open the Data configuration pane.

card dropped in design canvas with Assign Data option highlighted

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

dragging measure element to Actual Value section

Drag and Drop the elements to Target Value.

dragging measure element to Target Value section

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

changing aggregation type for actual value

You can use Filter option to filter the data by specifying the filter condition.

actual value settings menu with edit filter option highlighted

Measure Filter window will be shown to set the Ranges.

measure filter window

You can clear filter by selecting the Clear option for Actual Value.

actual value settings menu with clear filter option highlighted

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

changing aggregation type for target value

You can use Filter option to filter the data by specifying the filter condition.

target value settings menu with edit filter option highlighted

measure filter window with comparison operators list displayed

You can clear filter by selecting the Clear option for Target Value.

target value settings menu with clear filter option highlighted

Drag and Drop the elements from sections to Series.

dragging dimension element to Series section

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

series value settings menu highlighted

You can use the filters by selecting the Filter(s)… option to rank the elements.

filter option highlighted in series value settings menu

You can select the specific country to filter the element and CheckAll is used either to check all the data or to select the specific data. Include and Exclude is used to include and exclude the elements by selecting the radio button and click the Apply button.

dimension filters window with list dropdown opened

You can select the Condition option to change the Column elements and Summary type by selecting required column name and summary type.

condition section in dimension filters window

column dropdown opened in condition section in dimension filters window

summary dropdown opened in condition section in dimension filters window

You can select the Rank option to enable filters and select the Mode either top or bottom.

choosing ranking order

You can change the Count value to filter the top elements and change the column and summary type as required and click OK button.

changing the count

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

show all records option highlighted in series value settings menu

Here is an illustration,

series of cards rendered

You can add an additional value to the card if needed. Drag and Drop the item to Custom Value section.

dragging measure element to custom value section

card with custom value row

To showcase Sparkline in card widget, drag and drop a dimension field into the Sparkline section.

dragging year column to sparkline section

Sparkline shows the actual value trend with respect to added field.

card with sparkline

You can customize the properties of Sparkline

sparkline properties

Sparkline Type - Allows to change the type of Sparkline among Line, Area and Column

Show Marker - Allows to enable/disable the marker displayed on Sparkline

Low Value Color - Sets the color of marker for the least value

High Value Color - Sets the color of marker for the highest value

Opacity - Sets the opacity of Sparkline

How to configure SSAS data to Card Widget?

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

Following steps illustrates configuration of SSAS data to Card.

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

dragging card widget from toolbox to design canvas

After control added in design panel, click Assign Data button at Design Tools Pane to open the Data configuration pane.

dropped card widget in canvas with Assign Data option highlighted

Drag and drop a column under Measures category into Actual Value.

dragging measure element to actual value section

Drag and drop a column under Measures category into Target Value.

dragging measure element to target value section

Define the filter criteria to match through choosing Edit option in Filter menu item.

Edit option higlighted in measure value filter menu

The Measure filter dialog will be shown where you can choose the filter condition and apply the condition value.

measure filter window

Select Clear option to clear the defined filter.

clear option highlighted in measure value filter menu

Select Format option to define the display format to the values in the column through Measure Formatting window.

measure formatting window

Choose the options you need and click OK.

measure formatted with currency type

Add a dimension level or hierarchy into Series section through drag and drop.

adding dimension level to series section

Define filter criteria through Filter(s)… menu item in the Settings drop down menu.

filter menu highlighted in series value settings menu

To know more about filters, refer here.

Here is an illustration,

series of cards rendered

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

General Settings

general settings section in properties window

Heading

This allows you to set title for this card widget.

SubHeading

This allows you to set a sub title for the series of cards.

Description

This allows you to set description for this card widget, whose visibility will be denoted by i icon, hovering which will display this description in tooltip.

Basic Settings

basic settings section in properties window

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.

Subtitle

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

Subtitle Foreground

The text color of subtitle text can be customized.

Actual Value Foreground

You can customize the color of card value. This option will be disabled when Show Indicator Only option was enabled.

Secondary Value Type

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

secondary value type options in properties window

Actual Value Prefix

This allows you to set the actual value prefix.

Target Value Prefix

This allows you to set the target value prefix.

Behavior Settings

behavior settings section in properties window

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 Value and Target Value sections.

Primary Value Type

primary value type options in properties window

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

Default layout

default layout of card

Absolute difference

Absolute difference = Actual Value – Target Value

card with absolute difference set as primary value type

Percent of difference

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

card with percent of difference set as primary value type

Percent of target

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

card with percent of target set as primary value type

Actual value

card with actual value set as primary value type

Percent of Change

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

card with percent of change set as primary value type

Compact View

With minimal space, this option allows the user to showcase the values in a legible manner.

compact view of card

Visibility of Elements

This option allows to select the items to be displayed in card as desired.

Uniform Sizing

Displays the header and values in even font size for the cards designed with same height and width.

Custom Range

This option allows you to customize the colors and ranges of Card with the help of a window

add or edit custom ranges

range customization window

This window allows you to perform the following actions

  • To set a name for each range
  • To add a new range
  • To customize the range limits
  • To delete an existing range
  • To set an image as indicator, foreground and background colors for each range
  • To apply the range based on absolute values or percentage of its original value

Alignment Settings

This settings allows to you align the values at the Left, Right and Center positions.

alignment section in properties window

Filter Settings

filter section in properties window

Act as Master

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

Ignore Filter Actions

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

Link Settings

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

Container Appearance

container appearance section in properties window

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 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) in viewer.

Enable Comment

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