Hide Table of Contents
View Histogram Time Slider sample in sandbox
Histogram Time Slider

Description

The histogram time slider widget provides a simple way to visualize temporal data and filter based on date. The data used in this sample is a feature service with points showing concerts played by U2 in the United States from 1980 - 2011.

Code

<!DOCTYPE html>
<html>
 
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
   
<title>Histogram Time Slider</title>
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/tundra/tundra.css">
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">

   
<style>
      html
, body, #map {
        height
: 100%; width: 100%; margin: 0; padding: 0;
     
}
     
#histogram-container text, #histogram-range,
     
#scale-bar-left text, #scale-bar-right text {
        font
-family: sans-serif;
     
}
     
#histogram-timeslider-dijit #focusTip {
        font
-family: sans-serif;
     
}
   
</style>

   
<script src="https://js.arcgis.com/3.46/"></script>
   
<script>
     
var map;

      require
([
       
"esri/map", "esri/InfoTemplate",
       
"esri/layers/FeatureLayer", "esri/dijit/HistogramTimeSlider",
       
"dojo/parser", "dojo/dom-construct",
       
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
       
"dojo/domReady!"
     
], function(
       
Map, InfoTemplate,
       
FeatureLayer, HistogramTimeSlider,
        parser
, domConstruct
     
) {
          parser
.parse();

          map
= new Map("mapDiv", {
            basemap
: "oceans",
            center
: [-100, 40],
            zoom
: 4
         
});

         
// feature service with U2 concerts from 1980 - 2011
         
var featuresUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/U2/FeatureServer/0";
         
var layer = new FeatureLayer(featuresUrl, {
            id
: "u2",
            infoTemplate
: new InfoTemplate(
             
"U2:  1980-2011", // keep title short
             
"Date:  ${Date:DateFormat(selector: 'date', fullYear: true)}<br>" +
             
"Venue:  ${Venue}, ${City}, ${State}<br>" +
             
"Tour:  ${Tour}"
           
),
           
// infoTemplate: new InfoTemplate("title", "description"),
            mode
: FeatureLayer.MODE_SNAPSHOT, // SNAPSHOT required for the histogram time slider
            outFields
: ["*"]
         
});

         
var layerUpdateEnd = layer.on("update-end", function() {
            layerUpdateEnd
.remove();

           
var sliderElem = domConstruct.create("div", {
              id
: "timeSlider_"+ map.id,
              style
: "margin-bottom:10px; bottom:33px"
           
}, "bottom-div");
           
var sliderParams = {
             
// format the dates as mm/dd/yyyy
             
// more formatting options:  https://developers.arcgis.com/javascript/3/jshelp/intro_formatinfowindow.html
              dateFormat
: "DateFormat(selector: 'date', fullYear: true)",
              layers
: [ layer ],
              mode
: "show_all",
              timeInterval
: "esriTimeUnitsYears"
           
};
           
var slider = new HistogramTimeSlider(sliderParams, sliderElem);
            map
.setTimeSlider(slider);
            domConstruct
.destroy("loading");
         
});

          map
.addLayer(layer);
       
}
     
);
   
</script>
 
</head>
 
<body class="tundra">
   
<div class="demoLayout" style="height: 100%; width: 100%"
         
data-dojo-type="dijit/layout/BorderContainer"
         
data-dojo-props="design: 'headline'">

       
<div class="centerPanel"
             
data-dojo-type="dijit/layout/ContentPane"
             
data-dojo-props="region: 'center'">

         
<div id="mapDiv"
           
data-dojo-type="dijit/layout/ContentPane"
           
data-dojo-props="region:'center'">
         
</div>

       
</div>

       
<div class="edgePanel" id="bottom-div" style="height:145px; overflow:hidden"
             
data-dojo-type="dijit/layout/ContentPane"
             
data-dojo-props="region: 'bottom'">
       
</div>

   
</div>
 
</body>
</html>
 
         
Show Modal