The requested page is not available for the requested platform. You are viewing the content for Default platform.

Dashboard Class

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

Declaration

export class Dashboard extends SerializableModel implements IMasterFilterItemsProvider, IColorSignaturesProvider

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.

Inheritance

constructor

Initializes a new instance of the Dashboard class.

Declaration

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

Optional Parameters

Name Type Default Description
dashboardJSON any null
serializer DxDesigner.Analytics.Utils.ModelSerializer null

An object used for a dashboard deserialization. Do not pass this parameter directly.

Properties

colorScheme Property

Declaration

colorScheme: KnockoutObservableArray<ColorSchemeEntry>

Property Value

Type Description
KnockoutObservableArray<ColorSchemeEntry>

currencyCultureName Property

Declaration

currencyCultureName: KnockoutObservable<string>

Property Value

Type Description
KnockoutObservable<string>

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: KnockoutObservableArray<DataSource>

Property Value

Type Description
KnockoutObservableArray<DataSource>

An array of DataSource objects that are dashboard's data sources.

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.

// 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: KnockoutObservableArray<GroupItem>

Property Value

Type Description
KnockoutObservableArray<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: KnockoutObservableArray<DashboardItem>

Property Value

Type Description
KnockoutObservableArray<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: KnockoutObservable<DashboardLayoutGroup>

Property Value

Type Description
KnockoutObservable<DashboardLayoutGroup>

parameters Property

Specifies a collection of dashboard parameters.

Declaration

parameters: KnockoutObservableArray<Parameter>

Property Value

Type Description
KnockoutObservableArray<Parameter>

A collection of @js-DevExpress.Dashboard.Model.Parameters.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 Description
string

title Property

Declaration

title: DashboardTitle

Property Value

Type Description
DashboardTitle

Methods

dispose Method

Declaration

dispose(): void

findItem(itemId) Method

Declaration

findItem(itemId: string): DashboardItem

Parameters

Name Type Description
itemId string

Returns

Type Description
DashboardItem

getInfo Method

For internal use.

Declaration

getInfo(): DxDesigner.Analytics.Utils.ISerializationsInfo

Returns

Type Description
DxDesigner.Analytics.Utils.ISerializationsInfo

 

getJSON Method

Declaration

getJSON(): any

Returns

Type Description
any

rebuildLayout Method

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

Declaration

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

Optional Parameters

Name Type Default Description
clientWidth number null

A number that specifies the client width of the dashboard.

clientHeight number null

A number that specifies the client height of the dashboard.