Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: Gauge

require(["esri/dijit/Gauge"], function(Gauge) { /* code goes here */ });

Description

(Added at v3.0)
The gauge widget provides a streamlined way to create a dashboard-like interface and display data on a semi-circular gauge. To create a gauge provide an object with various options and a dom node. The options define the indicator color, number format, caption text and more.

Samples

Search for samples that use this class.

Constructors

NameSummary
new Gauge(params, srcNodeRef)Create a new Gauge object.

CSS

esri/dijit/Gauge | Download source

NameDescription
gaugeContainerDefine the size of the gauge.

Methods

NameReturn typeSummary
destroy()NoneDestroy the gauge.
get(name)String | Graphic | NumberGet the value of the property from the Gauge.
set(name, value)GaugeSet the value of a property from the Gauge.
startup()NoneFinalizes the creation of the gauge.
Constructor Details

new Gauge(params, srcNodeRef)

Create a new Gauge object.
Parameters:
<Object> params Required See options list for parameters.
<Node | String> srcNodeRef Required HTML element where the gauge should be rendered.
params properties:
<String> caption Optional Text to display at the bottom of the gauge.
<String> color Optional Color used for the arc indicator on the gauge. The default color is black (#000).
<String> dataField Optional Name of the attribute field used to drive the gauge. If a layer is supplied as a parameter dataField is required.
<String> dataFormat Optional Either "value" or "percentage". If "percentage is specified the gauge automatically calculates a percentage using maxDataValue and displays the result. The default is "value".
<String> dataLabelField Optional Name of the attribute field used to display a feature name on the gauge.
<Boolean> fromWebmap Optional When true, the gauge is created with JSON from an ArcGIS Online webmap. The default value is false.
<GraphicsLayer> layer Optional A esri.layers.GraphicsLayer or esri.layers.FeatureLayer used to drive the gauge. When this parameter is specified the gauge will automatically update as onMouseOver fires on the layer.
<Number> maxDataValue Optional Maximum value that will be displayed on the gauge. The default value is 100. When dataFormat is "percentage", this value is used to calculate percentages as the chart updates.
<String> noDataLabel Optional The text to display when a feature does not not a value for the dataLabelField.
<Object> numberFormat Optional Object passed to dojo.number.format to specify how data values are formatted. For instance, { "places": 2 }. See dojo.number documentation for more details.
<String> title Optional Text displayed above the gauge. The default value is an empty string.
<String> unitLabel Optional What to dsiplay after the value of the currently selected feature. When dataFormat is "percentage", this is always "%".
Sample:
require([
  "esri/dijit/Gauge", ... 
], function(Gauge, ... ) {
  var gaugeParams = {
    "caption": "Hurricane windspeed.",
    "color": "#c0c",
    "dataField": "WINDSPEED", 
    "dataFormat": "value",
    "dataLabelField": "EVENTID",
    "layer": fl,
    "maxDataValue": 120, 
    "noFeatureLabel": "No name",
    "title": "Atlantic Hurricanes(2000)",
    "unitLabel": "MPH"
  };
  var gauge = new Gauge(gaugeParams, "gaugeDiv");
  ...
});
Method Details

destroy()

Destroy the gauge. Call this method when the gauge is no longer needed by the application.

get(name)

Get the value of the property from the Gauge. Public properties are:
<String> caption The gauge caption
<String> dataLabel Data label
<Graphic> feature Current graphic associated with the gauge widget.
<String> title The gauge title.
<Number> value The gauge's current value.
Return type: String | Graphic | Number
Parameters:
<String> name Required Property to get value.

set(name, value)

Set the value of a property from the Gauge. Recommended when the Gauge is not explicitly connected to a layer. Public properties are:
<String> caption The gauge caption
<String> dataLabel Data label
<Graphic> feature Specify either an object from a graphic or feature layer mouse event or a graphic Setting feature causes dataLabel and value to update as well.
<String> title The gauge title.
<Number> value The gauge's current value.
Return type: Gauge
Parameters:
<String> name Required Property to set value.
<String | Graphic | Number> value Required Value to set.

startup()

Finalizes the creation of the gauge. Call startup() after creating the widget when you are ready for user interaction.
Sample:
require([
  "esri/dijit/Gauge", ... 
], function(Gauge, ... ) {
  var gauge = new Gauge(gaugeParams, "gaugeDiv");

  gauge.startup();
  ...
});
Show Modal