Card Charts are used to display related or group data through a variety of data visualization scenarios, custom visuals, and components. These charts are useful in highlighting the key information in a thumbnail view, obtained from the bound dataset or model. Such charts resemble the playing cards in size and shape and are best suitable in scenarios where you want to show repetitive data in a certain layout and style. A card chart repeats itself for each new record in the dataset or model.
For example, the card chart scenario in the below dashboard displays the sales revenue, planned revenue, and gross profit for different countries. For each new value of the country in the dataset, a new card instance is generated.
From the Dashboard Toolbox, open the Data Visualization node and drag-drop the Card Chart scenario onto the design area.
With the scenario selected, from the Data Binding tab, select the dataset or model. Once the dataset or model is successfully loaded in the designer, the data binding panel automatically expands and displays the data attributes available in it.
The following image shows the chart scenario bound to the 'RetailDataset' dataset.
Drag and drop a data attribute to the Category field. This field in the data binding area determines how many instances of the card chart scenario will be generated based on the attribute values. Since we want to display the sales information for each country in the dataset, set the Category field to 'RetailerCountry'. This way, the card chart will repeat itself for each new value for the retailer country in the dataset.
Unlike other dashboard scenarios, a card chart is a free form, where you can arrange and design the elements added to the scenario in the card template designer. For example, you can add charts, tables, maps, custom visuals, containers, images, and rich text to the card chart and organize them in any configuration you like.
Note: Card chart does not support card chart, calc chart, multi-source chart, slicers, embedded components (both reports and dashboards), and scenarios from Visual Gallery.
To enter the card template designer, use the Edit Card Template button present on the scenario.
In the card template designer, drag and drop the elements from the Dashboard Toolbox onto the design area, and bound these scenarios to the required data attributes. You can also modify the format of bound data attributes, perform various operations on the data, and style each element in the card chart according to your needs.
Note: Elements of the card chart scenario do not support actions like adding annotations and sharing scenarios.
In the following image, we added an indicator, KPI matrix, and KPI chart into the card chart scenario to show the sales revenue for different countries.
Click the Save Template button to keep the changes and then the Return to Dashboard button to close the template designer.
You can format the data attributes and control the display of data by performing a variety of operations such as renaming, modifying data format and display unit, creating a hierarchy field, applying an aggregation method, etc. Using these operations, you can control the display of data attributes in a scenario.
For more information about these operations, see Data Attributes.
In the following image, the data format for the data attributes like revenue, planned revenue, and gross profit, is modified to display the unit prices in 'currency'.
Wyn Dashboards scenarios support rich data analysis and exploration capabilities that can help analyze massive amounts of information and make data-driven decisions. For example, adding filters to scenarios, sorting data, applying conditional formatting, etc. Note that you can apply all these operations using the Action Bar corresponding to each scenario in the designer.
For more information, see Data Analysis and Interactivity in Dashboards.
In the following chart scenario, the filter is applied to show data only for the year 2015.
Note: The card chart scenario does not support the Focus and Export SVG Image options on the preview.
Use the properties in the Inspector tab of the scenario to customize its appearance by adding borders, renaming chart title, specifying card hover or selection color, modifying the card item layout, and more.
Specify Card Hover Color To change the background color of the card instance on mouse hover, use the Background Color property under the Card Item Hover Style section. The hover effect makes the chart more interactive. You can also specify the background gradient, background image, and border color for the card instance on hover.
Specify Card Selection Color To change the background color of the card instance on selection, use the Background Color property under the Card Item Selected Style section. The selection effect makes the chart more interactive. You can also specify the background gradient, background image, and border color for the card instance on hover.
Modify Card Item Layout Modify the layout of the card to change the arrangement of the generated instances on the published dashboard. To achieve this, use the Layout Mode property and set it to Auto, Distributed, or Fixed Size. The Auto mode uses the template ratio to render the card chart instances. The Distributed mode renders the card instances based on the item count per line and page. The Fixed Size mode renders the card instances based on the specified card dimensions. You can also use the following properties to enhance the card layout.