Today’s article will tell you about a new dashboard element, which has been available in Stimulsoft products since the 2022.2 release – Cards. This element allows you to display grouped data as cards. You can display values from data columns in each card, including images, and apply graphical analysis to these values. But, first things first. Firstly, you should understand how cards are formed in the element.
If data columns from various data sources, between which there is no connection and data, and they can be compared with, will be added to the element, cards will be formed both for unique values of the first data column and the second one. If there is a connection between the sources, the values from a column of another data source will be compared with and added to the cards formed by the values of the first data column. Generally, the number of cards depends on the number of unique values in the data which is defined for the element.
Creating cards
When a new data column is added to the Cards element, its card is created for each unique value from this column. When adding other data columns, their values will be compared with the values from the first data column and added to the corresponding cards. This way, data is grouped from a source and displayed on a particular card. Please, note!If data columns from various data sources, between which there is no connection and data, and they can be compared with, will be added to the element, cards will be formed both for unique values of the first data column and the second one. If there is a connection between the sources, the values from a column of another data source will be compared with and added to the cards formed by the values of the first data column. Generally, the number of cards depends on the number of unique values in the data which is defined for the element.
Graphical analysis in cards
Data column type is defined automatically as Measure and Dimension when adding. The analysis function is always applied to the columns of the Measure type but not to Dimension. You can change the data field type at any time. In this case, the same principle as for data fields in the Table element works out. Apart from displaying this in the cards, you can apply various types of graphical analysis to them, for example, Data Bars, Color Scale, Indicator, Bubble. These analysis types allow you to display the relative proportion of a value by various graphical means from the sum of all data column values. In addition, you can create Sparklines according to the values of a data column in a card. It’s a little Clustered Bar or Range Bar. You can enable or disable graphical analysis in the element editor by switching a type for each data field.Data output order
The values from the data columns in the card are displayed consistently. The data columns placement defines this order in the element editor. First, the card shows the value from the topmost data column in the editor, then from the one below, and so on. Thus, to change the data output order in the card, you should change the data columns order in the element editor. By the way, each value from a data column in a card will be displayed in a new row. However, if you need, you may output values in one row. To do this, you should set the Wrap Line property to False for the data column, after which the values should not be wrapped.The cards are output in the element consistently. Depending on the element size, its height, and width, the number of cards that can be displayed will be calculated automatically. Filling an element with cards by default starts from left to right, after which it moves to the next line in the component. The cards can be output from top to bottom and then in the next column on the right. This behavior is determined by the value of the Orientation property of the element. Lifehack
Suppose you need to output cards strictly in three columns in a horizontal orientation or, for example, three rows in a vertical direction after in our report and dashboard generator. In that case, you can force the number of columns in the element in the Column Count property. In this case, you should understand that the size of the cards themselves will be calculated in such a way as to fit the required number in a column or line.
Cards design
The element and cards are designed using properties or via the Style. When writing the article, the style provides you access to some element design settings, for example, Back Color, Fore Color, Line Color, and a set of colors for the Color Each mode. All other settings are available in the properties. And in this case, you should clearly distinguish between the settings of the Cards element and the settings of the cards in this element. The fact is that some properties may be repeated in name but be different in purpose. For example, you can define a corner radius for both the element and the cards in that element. All element design settings are placed in the Properties panel, and all card design settings are placed in the Properties panel in a separate group - Cards.Separately, we would like to remind you about the Color Each mode. In this mode, a card gets its own back color from a certain color collection in the element style or the Series Colors property. The mode is enabled or disabled depending on the value of the Color Each property from the Cards group.
Also, we have prepared a video with a description of work a new functionality for you. Watch this and other video tutorials on our YouTube channel.
This way, the cards as dashboard elements have great data visualization and analysis features. We hope that the article was helpful to you.