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.
#Inheritance
#constructor
Initializes a new instance of the Dashboard
class.
#Declaration
constructor(
dashboardJSON?: any,
serializer?: DevExpress.Analytics.Utils.ModelSerializer
)
#Parameters
Name | Type | Description |
---|---|---|
dashboard |
any | A JSON object used for dashboard deserialization. Do not pass this parameter directly. |
serializer | Model |
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
Type | Description |
---|---|
Observable |
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
Type | Description |
---|---|
Observable<string> | 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
Type | Description |
---|---|
Custom |
A Custom |
#Remarks
More information: 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<DevExpress.Dashboard.Model.DataSource>
#Property Value
Type | Description |
---|---|
Observable |
An array of Data |
#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
Type | Description |
---|---|
Observable |
A collection of Group |
#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
Type | Description |
---|---|
Observable |
A collection of Dashboard |
#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
Type | Description |
---|---|
Observable<Dashboard |
A Dashboard |
#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
Type | Description |
---|---|
Layout |
A Layout |
#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
Type | Description |
---|---|
Observable |
A collection of Parameter objects that are dashboard parameters. |
#Remarks
Add parameters to the parameters collection to show them in the dashboard.
#stateString Property
Gets or sets a string value of the dashboard state.
#Declaration
get stateString(): string
set stateString(stateVal: string)
#Property Value
Type | Description |
---|---|
string | 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
Type | Description |
---|---|
Dashboard |
A Dashboard |
#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
Name | Type | Description |
---|---|---|
item |
string | A string value that is a component name of the dashboard item. |
#Returns
Type | Description |
---|---|
Dashboard |
A Dashboard |
#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 |
---|---|
ISerialization |
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 |
---|---|---|
client |
number | A number that specifies the client width of the dashboard. |
client |
number | A number that specifies the client height of the dashboard. |