Dashboard Class

Contains the full description of a dashboard used to visualize data.

Declaration

export class Dashboard extends SerializableModel implements IMasterFilterItemsProvider, IColorSignaturesProvider, ICustomPropertiesProvider

Remarks

The Dashboard class contains a complete description of a dashboard, including the collection of dashboard items and groups, data binding information, layout and appearance settings, etc.

To create a new dashboard in code, do the following.

• Create a data source for the dashboard and add this data source to the Dashboard.dataSources collection.
• Create required dashboard items and add these items to the Dashboard.items collection. Bind data-bound dashboard items (DataDashboardItem descendants) to the dashboard data source.
• Specify the dashboard layout using the Dashboard.layout property.

If necessary, you can add dashboard parameters (Dashboard.parameters), change dashboard title settings (Dashboard.title), customize a global color scheme (Dashboard.colorScheme), etc.

Use the dashboard property to specify the currently opened dashboard.

constructor

Initializes a new instance of the Dashboard class.

Declaration

constructor(
    dashboardJSON?: any,
    serializer?: DevExpress.Analytics.Utils.ModelSerializer
)

Parameters

Name	Type	Description
dashboardJSON	any	A JSON object used for dashboard deserialization. Do not pass this parameter directly.
serializer	ModelSerializer	An object used for dashboard deserialization. Do not pass this parameter directly.

Properties

colorScheme Property

Declaration

colorScheme: ko.ObservableArray<ColorSchemeEntry>

Property Value

Type
ObservableArray<ColorSchemeEntry>

currencyCultureName Property

Gets or sets the default currency for the Web Dashboard.

Declaration

currencyCultureName: ko.Observable<string>

Property Value

Type	Description
Observable<string>	A string that specifies the name of a culture that defines the currency format settings.

customProperties Property

Gets custom properties available for the current dashboard.

Declaration

customProperties: CustomProperties

Property Value

Type	Description
CustomProperties	A CustomProperties object that provides access to the dashboard’s custom properties.

Remarks

Tip

Documentation: Custom Properties

dashboardJSON Property

Specifies the dashboard definition in a JSON format.

Declaration

dashboardJSON: any

Property Value

Type	Description
any	A dashboard definition in JSON format.

Remarks

You can use the dashboardJSON property to create a dashboard by providing the dashboard definition in the JSON format.

dataSources Property

Specifies the collection of dashboard data sources.

Declaration

dataSources: ko.ObservableArray<DataSource>

Property Value

Type
ObservableArray<DataSource>

Remarks

The following example shows how to get the existing data source from the opened dashboard and use it as a data source for dashboard items.

• For SQL data sources, use the dashboard item’s DataDashboardItem.dataSource and DataDashboardItem.dataMember properties.
• For other data sources, set only the DataDashboardItem.dataSource property.

// Use the line below for a modular approach:
// import * as Model from 'devexpress-dashboard/model'
// Use the line below for an approach with global namespaces:
// var Model = DevExpress.Dashboard.Model;

// ...

public createDataSource() {
    var dashboard = this.webDashboard.dashboard();

    // Get the existing data sources.
    var sqlDataSource = <Model.SqlDataSource>dashboard.dataSources()[0];
    var excelDataSource = <Model.SqlDataSource>dashboard.dataSources()[1];

    // Create data items for the Grid.
    var gridCategoryName = new Model.Dimension();
    gridCategoryName.dataMember("CategoryName");
    var gridUnitPrice = new Model.Measure();
    gridUnitPrice.dataMember("UnitPrice");

    // Create the Grid dashboard item and bind it to data.
    var gridItem = new Model.GridItem();  
    gridItem.dataSource(sqlDataSource.componentName());
    gridItem.dataMember(sqlDataSource.queries()[0].name());

    // Create data items for the Geo Point Map.
    var geoPointMapImport = new Model.Measure();
    geoPointMapImport.dataMember("Import");
    var geoPointMapLatitude = new Model.Dimension();
    geoPointMapLatitude.dataMember("Latitude");
    var geoPointMapLongitude = new Model.Dimension();
    geoPointMapLongitude.dataMember("Longitude");

    // Create the Geo Point Map dashboard item and bind it to data.
    var geoPointMapItem = new Model.GeoPointMapItem();
    geoPointMapItem.dataSource(excelDataSource.componentName());

    // ...
}

groups Property

Provides access to a collection of dashboard item groups.

Declaration

groups: ko.ObservableArray<GroupItem>

Property Value

Type	Description
ObservableArray<GroupItem>	A collection of GroupItem objects.

Remarks

A dashboard item group (the GroupItem object) arranges dashboard items within the Dashboard. It groups dashboard items into a separate layout group. Moreover, the dashboard item group provides the capability to affect interaction between dashboard items within and outside of the group.

Add dashboard group to the groups collection to it them in the dashboard.

items Property

Provides access to a collection of dashboard items.

Declaration

items: ko.ObservableArray<DashboardItem>

Property Value

Type	Description
ObservableArray<DashboardItem>	A collection of DashboardItem objects that are dashboard items.

Remarks

Add dashboard items to the items collection to show them in the dashboard.

layout Property

Declaration

layout: ko.Observable<DashboardLayoutGroup>

Property Value

Type
Observable<DashboardLayoutGroup>

parameters Property

Specifies a collection of dashboard parameters.

Declaration

parameters: ko.ObservableArray<Parameter>

Property Value

Type	Description
ObservableArray<Parameter>	A collection of Parameter objects that are dashboard parameters.

Remarks

Add parameters to the parameters collection to show them in the dashboard.

stateString Property

Declaration

stateString: string

Property Value

Type
string

title Property

Declaration

title: DashboardTitle

Property Value

Type
DashboardTitle

Methods

dispose Method

Declaration

dispose(): void

findItem(itemId) Method

Find an item in the current dashboard by its component name.

Declaration

findItem(
    itemId: string
): DashboardItem

Parameters

Name	Type	Description
itemId	string	A string value that is a component name of the dashboard item.

Returns

Type	Description
DashboardItem	A DashboardItem that corresponds to the specified component name.

Remarks

The following example shows how to get the Grid dashboard item from the current dashboard by its name:

var grid = dashboardControl.dashboard().findItem("gridSalesByState");

getInfo Method

For internal use.

Declaration

getInfo(): DevExpress.Analytics.Utils.ISerializationInfoArray

Returns

Type	Description
ISerializationInfoArray	An array of objects that provide serialization info.

getJSON Method

Declaration

getJSON(): any

Returns

Type
any

rebuildLayout Method

Updates the dashboard layout tree according to the current dashboard object model.

Declaration

rebuildLayout(
    clientWidth?: number,
    clientHeight?: number
): void

Parameters

Name	Type	Description
clientWidth	number	A number that specifies the client width of the dashboard.
clientHeight	number	A number that specifies the client height of the dashboard.