GaugeItem Class

A Gauge dashboard item that visualizes data within a series of KPI elements (gauges).

Declaration

export class GaugeItem extends KpiItem

Remarks

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

colorScheme

coloringOptions

componentName

contentArrangementMode

contentLineCount

customProperties

dataItems

dataMember

dataSource

disposed

filterString

formatRules

hiddenDimensions

hiddenMeasures

interactivityOptions

isDisposed

isMasterFilterCrossDataSource

itemType

name

parentContainer

seriesDimensions

showCaption

visibleDataFilterString

dispose

getInfo

getUniqueNamePrefix

Inheritance

SerializableModel

TypedSerializableModel

DashboardItem

DataDashboardItem

SeriesItem

KpiItem

GaugeItem

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 GaugeItem are painted.

Remarks

Use the viewType property to specify a view type that defines the style and layout of every individual gauge displayed within the GaugeItem.