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

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

Description

(Added at v3.6)
The HistogramTimeSlider dijit provides a histogram chart representation of data for time-enabled layers on a map. Through the UI, users can control temporally the display of data with an extension to the TimeSlider.

Samples

Search for samples that use this class.

Constructors

NameSummary
new HistogramTimeSlider(params, srcNodeRef)Creates a new HistogramTimeSlider dijit using the given DOM node.

CSS

esri/dijit/HistogramTimeSlider | Download source

NameDescription
histogram-timesliderCustomizes the css styles of a HistogramTimeSlider dijit.
.histogram-timeslider {
  overflow-x: hidden;
  height: 160px;
  font-family: arial,sans-serif;
}
histogram-timeslider #histogram-rangeChanges the font and color of histogram range. Default is #666666.
.histogram-timeslider #histogram-range {
  color: #999;
  font-size: 12pt;
}

Methods

NameReturn typeSummary
destroy()NoneSet related objects as null and hide the widget.
startup()NoneFinalizes 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.

Events

NameEvent ObjectSummary
time-extent-changeFires whenever the slider moved, and the visible time extent is changed.
updateFires fires each time the histogram is drawn.
Constructor Details

new HistogramTimeSlider(params, srcNodeRef)

Creates a new HistogramTimeSlider dijit using the given DOM node.
Parameters:
<Object> params Required Input parameters. See options table for details.
<Node | String> srcNodeRef Required HTML element where the tool should be rendered.
params properties:
<String> color Optional Change color of histogram bars, default is "rgb(5, 112, 176)".
color: "#555555"
<String> dateFormat Optional Formats dates displayed by histogram slider.
dateFormat: "DateFormat(selector: 'date', fullYear: true)"
<Layer[]> layers Optional Array of feature layers to be used by slider. *Note: Feature layer must be used in snapshot mode: esri.layers.FeatureLayer.MODE_SNAPSHOT.
layers: [featureLayer]
<String> mode Optional With a stream layer, when the number of points on the map exceeds the maximum number allowed, this histogram will start removing bins at the beginning of the array if in the "show_partial" mode. If you do not want to remove any of the histogram bins, use "show_all" mode instead.
mode: "show_all"
<String> timeInterval Optional Sets resolution for histogram slider (seconds/minutes/hours/etc) using Esri date formats. Valid values include: esriTimeUnitsCenturies | esriTimeUnitsDays | esriTimeUnitsDecades | esriTimeUnitsHours | esriTimeUnitsMilliseconds | esriTimeUnitsMinutes | esriTimeUnitsMonths | esriTimeUnitsSeconds | esriTimeUnitsWeeks | esriTimeUnitsYears | esriTimeUnitsUnknown
timeInterval: "esriTimeUnitsMonths"
Sample:
require(["esri/dijit/HistogramTimeSlider", ... ], function(HistogramTimeSlider, ... ){
  var slider = new esri.dijit.HistogramTimeSlider({
    dateFormat: "DateFormat(selector: 'date', fullYear: true)",
    layers : [ layer ],
    mode: "show_all",
    timeInterval: "esriTimeUnitsYears"
  }, dojo.byId("histogram"));

  map.setTimeSlider(slider);
});
Method Details

destroy()

Set related objects as null and hide the widget.

startup()

Finalizes the creation of the widget. (Added at v3.12)
Event Details
[ On Style Events | Connect Style Event ]

time-extent-change

Fires whenever the slider moved, and the visible time extent is changed.

update

Fires fires each time the histogram is drawn.