Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: Gauge
[ AMD Module Require | Legacy Module Require ]
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
| Name | Summary |
|---|---|
| new Gauge(params, srcNodeRef) | Create a new Gauge object. |
CSS
esri/dijit/Gauge | Download source
| Name | Description |
|---|---|
| gaugeContainer | Define the size of the gauge. |
Methods
| Name | Return type | Summary |
|---|---|---|
| destroy() | None | Destroy the gauge. |
| get(name) | String | Graphic | Number | Get the value of the property from the Gauge. |
| set(name, value) | Gauge | Set the value of a property from the Gauge. |
| startup() | None | Finalizes the creation of the gauge. |
Constructor Details
Create a new Gauge object.
Parameters:
< |
Required | See options list for parameters. |
< |
Required | HTML element where the gauge should be rendered. |
params properties: < |
Optional | Text to display at the bottom of the gauge. |
< |
Optional | Color used for the arc indicator on the gauge. The default color is black (#000). |
< |
Optional | Name of the attribute field used to drive the gauge. If a layer is supplied as a parameter dataField is required. |
< |
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". |
< |
Optional | Name of the attribute field used to display a feature name on the gauge. |
< |
Optional | When true, the gauge is created with JSON from an ArcGIS Online webmap. The default value is false. |
< |
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. |
< |
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. |
< |
Optional | The text to display when a feature does not not a value for the dataLabelField. |
< |
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. |
< |
Optional | Text displayed above the gauge. The default value is an empty string. |
< |
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 the gauge. Call this method when the gauge is no longer needed by the application.
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. |
Parameters:
< |
Required | Property to get 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