[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Collapse]Report and Dashboard Server
 [Expand]Installation
  License and Distribution
 [Expand]Administrative Panel
 [Expand]Create Reports
 [Collapse]Create Dashboards
   Create and Customize Dashboards
   Bind a Dashboard to Data
   Add Dashboard Items and Perform Basic Data Shaping
   Customize the Dashboard Appearance
   Provide Interactivity to the Dashboard
   Create a Calculated Field
   Add Filter Elements
   Customize the Dashboard Layout
   Add a Dashboard Parameter and Filter Data
   Export the Dashboard and Its Items
 [Expand]Configuration and API
  Localization
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Add Dashboard Items and Perform Basic Data Shaping

After creating a dashboard and providing data to it, add dashboard items to display visual and textual information in a dashboard.

Refer to the Designing Dashboard Items document for a complete list of available dashboard items.

Expanded Add a Grid

Click the Grid button in the Toolbox or drag and drop this item onto the dashboard surface.

This creates a new configurable Grid dashboard item.

Select the item and open its Bindings menu to see the data source to which this item is bound and empty placeholders for providing data.

Click Add Column and choose the CategoryName data field in the invoked list.

Add one more column and select the ExtendedPrice field.

In this example, the first column is a dimension and the second column as a measure. Both these values can be of any type - string, date-time or numeric.

  • The dimension is used to provide discrete categorical information. The dashboard does not summarize the dimension values, but groups identical values. You can perform grouping, sorting, or display the top values for the dimension values.
  • The measure is used to summarize data against grouped dimension values. The dashboard calculates an appropriate summary function against measure values. You can also customize the data format settings that affect how summary values are displayed.

The dashboard calculates Sum for numeric measures by default. You can select the required summary function in the Summary Type drop-down list.

Expand the Format section and apply required currency formatting to this column.

Select the CategoryName column, expand the Options section and specify the desired caption.

Open the Data Shaping section and select the ExtendedPrice column in the Sort By drop-down list to sort grid data against summary values calculated for the selected measure. You can choose the ascending or descending sort order.

Expanded Add a Chart

Click the Chart button in the Toolbox to add a new chart item to the dashboard.

Open the chart's Bindings menu, click the Add Values placeholder and select the ExtendedPrice field.

Click Add Argument and select the OrderDate data field. The Group Interval property is set to Year by default. The chart now displays extended price values for each year.

Add one more OrderDate argument and set its Group Interval option to Quarter to display data hierarchically.

Expanded Add a Pie

Click the Pies button in the Toolbox to add a Pie item that shows each value's contribution to a total.

In the Bindings menu, specify the ExtendedPrice data field for values and the SalesPerson field for arguments of this pie.

Expanded Add Cards

Add the Card dashboard item by clicking the corresponding button in the Toolbox.

Invoke the Bindings menu, click Add Card and select the ExtendedPrice data field for calculating values displayed within cards. Click Add Series and select the Country field used to label cards. Then, click Add Sparkline and choose the OrderDate field to visualize the variation of card values over time.

Expanded View the Result

The following image demonstrates the resulting dashboard:

Expanded See Also

Is this topic helpful?​​​​​​​