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: HistogramTimeSlider
[ AMD Module Require | Legacy Module Require ]
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
| Name | Summary |
|---|---|
| new HistogramTimeSlider(params, srcNodeRef) | Creates a new HistogramTimeSlider dijit using the given DOM node. |
CSS
esri/dijit/HistogramTimeSlider | Download source
| Name | Description |
|---|---|
| histogram-timeslider | Customizes the css styles of a HistogramTimeSlider dijit.
.histogram-timeslider {
overflow-x: hidden;
height: 160px;
font-family: arial,sans-serif;
} |
| histogram-timeslider #histogram-range | Changes the font and color of histogram range. Default is #666666.
.histogram-timeslider #histogram-range {
color: #999;
font-size: 12pt;
} |
Methods
| Name | Return type | Summary |
|---|---|---|
| destroy() | None | Set related objects as null and hide the widget. |
| 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.
Events
| Name | Event Object | Summary |
|---|---|---|
| time-extent-change | Fires whenever the slider moved, and the visible time extent is changed. | |
| update | Fires fires each time the histogram is drawn. |
Constructor Details
Creates a new HistogramTimeSlider dijit using the given DOM node.
Parameters:
< |
Required | Input parameters. See options table for details. |
< |
Required | HTML element where the tool should be rendered. |
params properties: < |
Optional | Change color of histogram bars, default is "rgb(5, 112, 176)".color: "#555555" |
< |
Optional | Formats dates displayed by histogram slider.dateFormat: "DateFormat(selector: 'date', fullYear: true)" |
< |
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] |
< |
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" |
< |
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 | esriTimeUnitsUnknowntimeInterval: "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
Event Details
[ On Style Events | Connect Style Event ]