require(["esri/dijit/ColorInfoSlider"], function(ColorInfoSlider) { /* code goes here */ });
Description
(Added at v3.13)
A widget to assist with managing a renderer for visualizing features based upon colors.
Samples
Search for
samples that use this class.
Class hierarchy
esri/dijit/RendererSlider
|_esri/dijit/ColorInfoSlider
Constructors
CSS
esri/dijit/ColorInfoSlider | Download source
NumberTextBoxContainer | None |
bottomLabelNode | None |
esriRendererSlider | None |
handler | None |
handlerLabel | None |
handlerTick | None |
handlerTickBottom | None |
handlerTickTop | None |
moveable | None |
sliderArea | None |
sliderAreaRight | None |
sliderNode | None |
topLabelNode | None |
Properties
Methods
startup() | None | Finalizes the creation of the widget. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Constructor Details
Creates a new ColorInfoSlider
widget within the provided DOM node srcNodeRef
.
Parameters:
<Object > params |
Required |
Set of parameters used to specify the ColorInfoSlider widget options. |
<Node | String > srcNodeRef |
Required |
Reference or ID of the HTMLElement where the widget should be rendered. |
params
properties:
<Object > colorInfo |
Required |
The data map containing renderer information. See Renderer.colorInfo for additional information. |
<Number[] > handles |
Required |
Handles identified by their index values within the stops array. |
<Object > histogram |
Optional |
Optional: Represents the histogram data object. Access this from the FeatureLayerStatistics.getHistogram response. See the object specifications table below for the structure of the returned histogram object. |
<Number > histogramWidth |
Optional |
Width of histogram in pixels. Default value is 100 . |
<Number > maxValue |
Optional |
The absolute maximum value of the slider. NOTE: This value overrides the statistics max property. |
<Number > minValue |
Optional |
The absolute minimum value of the slider. NOTE: This value overrides the statistics min property. |
<Number > primaryHandle |
Optional |
The handle identified by its index value within the stops array. This value must also be in handles array. |
<Number > rampWidth |
Optional |
Width of widget ramp in pixels. Default value is 26 . |
<Boolean > showHandles |
Optional |
Displays handles when set to true . Default is true . |
<Boolean > showHistogram |
Optional |
Displays the histogram when true . |
<Boolean > showLabels |
Optional |
Displays labels when set to true . Default is true . |
<Boolean | String > showRatioLabels |
Optional |
Indicates whether to display percentage labels. This can be either null|false , "percent" , or "percentTotal" . |
<Boolean > showTicks |
Optional |
Displays tick marks when set to true . Default is true . |
<Boolean > showTransparentBackground |
Optional |
Displays transparent background when set to true . Default is false . |
<Object > statistics |
Optional |
Represents a statistics data object. Access this from the FeatureLayerStatistics.getFieldStatistics response. |
<Object > zoomOptions |
Optional |
Additional options to customize slider. For example, if the slider has a range between 0 and 100 with two handles at 10 and 20, it is possible to pass in zoomOptions with 0 and 30 for the minSliderValue and maxSliderValue . The slider would be cut off at the top and zoomed to a ramp that can move from 0 through 30.
See the zoomOptions table below for additional information. |
Sample:
require("esri/dijit/ColorInfoSlider", function (ColorInfoSlider) {
// --------------------------------------------------------------------
// Create the ColorInfoSlider widget and initialize. Pass in an initial stops parameter.
// --------------------------------------------------------------------
var colorInfoSlider = new ColorInfoSlider({
colorInfo: {
stops:[
{color: new Color([92,92,92]), label: "50", value: 50},
{color: new Color([92,92,92]), label: "51", value: 51}
]
}
}, "esri-colorinfoslider");
colorInfoSlider.startup();
}
Property Details
Required: The data map containing renderer information. See
Renderer.colorInfo
for additional information.
Default value: null
Required: Handles identified by their index values within the
stops
array.
Default value: []
Optional: Represents the
histogram
data object. Access this from the
FeatureLayerStatistics.getHistogram
response. See the object specifications table below for the structure of the returned histogram object.
Default value: null
Object Specifications: <histogram
>
<Object[] > bins |
Required |
An array of objects indicating bins in the histogram. It contains the number of features that fall into each of the disjoint categories in the histogram.
The object includes the following properties:- count: Numeric value indicating the count in each bin.
- maxValue: Numeric value indicating the maximum value for the specified bin.
- minValue: Numeric value indicating the minimum value for the specified bin.
|
<Number > maxValue |
Required |
Maximum value captured by the histogram. This is optional if statistics are passed in. |
<Number > minValue |
Required |
Minimum value captured by the histogram. This is optional if statistics are passed in. |
<Number > normalizationTotal |
Optional |
Sum of all data values used to normalize data. Available only when normalizationType is percent-of-total . |
Optional: Width of histogram in pixels.
Default value: 100
Optional: The absolute maximum value of the slider.
NOTE: This value overrides the
statistics max
property.
Default value: 100
Optional: The absolute minimum value of the slider.
NOTE: This value overrides the
statistics min
property.
Default value: 0
Optional: The handle identified by its index value within the
stops
array. This value must also be in
handles
array.
Default value: null
Optional: Width of the widget ramp in pixels.
Default value: 26
Optional: Indicates whether to display handles.
Known values: true | false
Default value: true
Optional: Indicates whether to display the histogram
.
Known values: true | false
Default value: true
Optional: Indicates whether to display handles.
Known values: true | false
Default value: true
Indicates whether to display percentage labels. This can be either
null|false
,
"percent"
, or
"percentTotal"
.
(Added at v3.15) Default value: false
Sample:
slider = new ColorInfoSlider({
"showRatioLabels": "percent",
"colorInfo": {
"stops": [
{value: 0.5, color: "#FFEE99", label: "< .5"},
{value: 1, color: "#999166", label: "1"},
{value: 2, color: "#333333", label: "> 2"}]},
handles:[0,1,2],
statistics:{
avg: 1.16667,
count: 3,
max: 2,
min: 0.5
}
}, "sliderDiv");
slider.startup();
Optional: Indicates whether to display ticks marks.
Known values: true | false
Default value: true
Optional: Indicates whether to display a transparent background.
Known values: true | false
Default value: false
Required: Handle positions represented as numbers that fall between minimum
and maximum
.
Default value: [50]
Optional: Additional options to customize slider. For example, if the slider has a range between 0 and 100 with two handles at 10 and 20, it is possible to pass in zoomOptions
with 0 and 30 for the minSliderValue
and maxSliderValue
. The slider would be cut off at the top and zoomed to a ramp that can move from 0 through 30.
See the zoomOptions
table below for additional information.
Default value: null
Object Specifications: <zoomOptions
>
<Object > histogram |
Required |
Histogram data object. |
<Number > maxSliderValue |
Required |
Maximum value of slider. |
<Number > minSliderValue |
Required |
Minimum value of the slider. |
Method Details
Finalizes the creation of the widget.
Event Details
[ On Style Events | Connect Style Event ]
Fires during slide and slide stop, and when a handle or the
minValue
or
maxValue
of the
ColorInfoSlider
are updated via text box. Listen to this event only if the layer is rendered with WebGL. Otherwise, performance may be hampered.
(Added at v3.24) Event Object Properties:
<Object > colorInfo |
The colorInfo of the ColorInfoSlider object. |
<Number > maxValue |
The maxValue of ColorInfoSlider. |
<Number > minValue |
The minValue of ColorInfoSlider. |
Fires when
minValue
or
maxValue
of the
ColorInfoSlider
are updated via text box.
Event Object Properties:
<Object > colorInfo |
The colorInfo of the ColorInfoSlider object. |
<Number > maxValue |
Contains current maxValue of ColorInfoSlider. |
<Number > minValue |
Contains current minValue of ColorInfoSlider. |
Fires on slide stop and when a handle is updated via textbox.
Fires when the zoom state changes. (Added at v3.15)
Event Object Properties:
<Boolean > zoomed |
Indicates whether the slider is currently in a zoomed state. |
Fires when the zoom state changes. (Added at v3.15)
Event Object Properties:
<Boolean > zoomed |
Indicates whether the slider is currently in a zoomed state. |