GaugeItem Class
A Gauge dashboard item that visualizes data within a series of KPI elements (gauges).
Declaration
export class GaugeItem extends KpiItemRemarks
The gauge dashboard item visualizes data within a series of KPI elements called gauges.
See Web Dashboard - Creating Gauges to learn more about gauges.
Example
The following example shows how to create the Gauge dashboard item, bind it to data and add to the existing dashboard.
Create data items (measures and dimensions) and use the DataItem.dataMember property to bind them to the existing data source’s columns. Then use the created measures and dimensions in the dashboard item to bind it to data.
After you add the created dashboard item to the Dashboard.items collection, call the Dashboard.rebuildLayout method to rebuild the dashboard layout and display changes.
// 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 createGaugeItem() {
// Create data items for the Gauge dashboard item.
var gaugeCategory = new Model.Dimension();
gaugeCategory.dataMember("Category");
var gaugeRevenueQTD = new Model.Measure();
gaugeRevenueQTD.dataMember("RevenueQTD");
var gaugeRevenueQTDTarget = new Model.Measure();
gaugeRevenueQTDTarget.dataMember("RevenueQTDTarget");
// Create the Gauge dashboard item and bind it to data.
var gaugeItem = new Model.GaugeItem();
var gauge = new Model.Gauge(gaugeItem);
gaugeItem.name('gauges');
gaugeItem.dataSource(excelDataSource.componentName());
gauge.name("gauge");
gauge.actualValue(gaugeRevenueQTD);
gauge.targetValue(gaugeRevenueQTDTarget);
gaugeItem.gauges.push(gauge);
gaugeItem.seriesDimensions.push(gaugeCategory);
control.dashboard().items.push(gaugeItem);
// ...
control.dashboard().rebuildLayout();
}
Inherited Members
Inheritance
constructor
Initializes a new instance of the GaugeItem class.
Declaration
constructor(
modelJson?: any,
serializer?: DevExpress.Analytics.Utils.ModelSerializer
)Parameters
| Name | Type | Description |
|---|---|---|
| modelJson | 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
gauges Property
Declaration
gauges: ko.ObservableArray<DevExpress.Dashboard.Model.Gauge>Property Value
| Type |
|---|
| ObservableArray<Gauge> |
showGaugeCaptions Property
Declaration
showGaugeCaptions: ko.Observable<boolean>Property Value
| Type |
|---|
| Observable<boolean> |
viewType Property
Specifies how gauges displayed within this GaugeItem are painted.
Declaration
viewType: ko.Observable<DevExpress.Dashboard.Model.GaugeViewType>Property Value
| Type | Description |
|---|---|
| Observable<GaugeViewType> | A string that specifies how gauges displayed within this |
Remarks
Use the viewType property to specify a view type that defines the style and layout of every individual gauge displayed within the GaugeItem.