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.

Implements

IMasterFilterItemsProvider

IColorSignaturesProvider

ICustomPropertiesProvider

Inherited Members

disposed

Inheritance

SerializableModel Dashboard

constructor

Initializes a new instance of the Dashboard class.

Declaration

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

Parameters

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

Provides access to a dashboard color scheme.

Declaration

colorScheme: ko.ObservableArray<DevExpress.Dashboard.Model.ColorSchemeEntry>

Property Value

The color scheme used to color dashboard item elements.

|

Remarks

More information: Coloring.

currencyCultureName Property

Gets or sets the default currency for the Web Dashboard.

Declaration

currencyCultureName: ko.Observable<string>

Property Value

A string that specifies the name of a culture that defines the currency format settings.

|

customProperties Property

Provide access to the custom properties available for the current dashboard.

Declaration

customProperties: DevExpress.Dashboard.Model.CustomProperties

Property Value

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

|

Remarks

More information: Custom Properties.

See Also

Create Custom Properties in the Web Dashboard

dashboardJSON Property

Specifies the dashboard definition in a JSON format.

Declaration

dashboardJSON: any

Property Value

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<DevExpress.Dashboard.Model.DataSource>

Property Value

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.

• 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<DevExpress.Dashboard.Model.GroupItem>

Property Value

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<DevExpress.Dashboard.Model.DashboardItem>

Property Value

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

Provide access to the root dashboard layout group.

Declaration

layout: ko.Observable<DevExpress.Dashboard.Model.DashboardLayoutGroup>

Property Value

A DashboardLayoutGroup object that specifies the root dashboard layout group.

|

Remarks

This layout group contains child layout items and groups used to arrange dashboard items. Use the DashboardLayoutGroup.childNodes property to get the collection of child nodes.

layoutOptions Property

Provides access to the dashboard layout settings.

Declaration

layoutOptions: DevExpress.Dashboard.Model.LayoutOptions

Property Value

A LayoutOptions object that contains the dashboard layout settings.

|

Remarks

You can use the LayoutOptions.height and LayoutOptions.width properties to adjust the dashboard layout. These properties return the LayoutDimensionOptions object that contains settings for the corresponding dimensions of the dashboard surface.

The following code snippet specifies the height and aligns the dashboard’s content horizontally:

Handle the DashboardControlOptions.onDashboardInitializing event and call the custom setLayout function:

function setLayout(e) {
    if (e.dashboard.id == "dashboard2") {
        e.dashboard.layoutOptions.width.mode("Auto");
        e.dashboard.layoutOptions.height.mode("Fixed");
        e.dashboard.layoutOptions.height.value(3000);
    }

parameters Property

Specifies a collection of dashboard parameters.

Declaration

parameters: ko.ObservableArray<DevExpress.Dashboard.Model.Parameter>

Property Value

A collection of Parameter objects that are dashboard parameters.

|

Remarks

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

requestParameters Property

Specifies whether to load dashboard data only after the user submits parameter values.

Declaration

requestParameters: ko.Observable<boolean>

Property Value

true to load a dashboard data after the user submits dashboard parameters; otherwise, false.

|

Remarks

See the following article for more information: Create a Dashboard Parameter on the Web.

stateString Property

Gets or sets a string value of the dashboard state.

Declaration

get stateString(): string
set stateString(stateVal: string)

Property Value

A String object that is the dashboard state.

|

title Property

Provides access to the dashboard title settings.

Declaration

title: DevExpress.Dashboard.Model.DashboardTitle

Property Value

A DashboardTitle object that contains the dashboard title settings.

|

Methods

dispose Method

Disposes of all resources associated with this Dashboard.

Declaration

dispose(): void

findItem(itemId) Method

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

Declaration

findItem(
    itemId: string
): DevExpress.Dashboard.Model.DashboardItem

Parameters

A string value that is a component name of the dashboard item.

|

Returns

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

An array of objects that provide serialization info.

|

getJSON Method

Declaration

getJSON(): any

Returns

rebuildLayout Method

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

Declaration

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

Parameters

A number that specifies the client width of the dashboard.

| | clientHeight | number |

A number that specifies the client height of the dashboard.

|