Histogram Time Slider 0 - Time Slider 1

MatthieuMacret · ‎04-29-2014

Hello,

I defined a time-aware Feature Layer using a Feature Collection. I then manually added Points to the layer using featureLayer.add(graphic) (see code below).

The Feature Layer is correctly displayed on the map but when I tried to implement the Histogram Time Slider I get the following errors:

Error: Invalid value for <line> attribute x1="undefined" svg.js:56
Error: Invalid value for <line> attribute x2="undefined" svg.js:56
Error: Invalid value for <text> attribute x="NaN" svg.js:62
Error: Invalid value for <line> attribute x1="undefined" svg.js:56
Error: Invalid value for <line> attribute x2="undefined" svg.js:56
Error: Invalid value for <text> attribute x="NaN"

I thought there could be some issues with the formatting of my dates or with my Feature Layer configuration so I spent some time trying to tweak them without success.
I then tried to use the same code and just replace the Histogram Time Slider by a simple Time Slider and, in this case, it works perfectly!

I cannot figure out where is the problem with the Histogram Time Slider. Is this feature suppose to work only with Feature Layers that depend on REST resources?

<!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>Find Address</title>

    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.9/js/esri/css/esri.css">

    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
      #loading {
        width:100%; 
        position:absolute;
        height:400px;
        background:transparent url("http://dl.dropbox.com/u/2654618/ajax-gear.gif") center no-repeat;
        z-index:100;
      }
      #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="http://js.arcgis.com/3.9/"></script>
    <script>

      var data = {
          "names" : ["start_date", "end_date", "resource_id", "wells", "type", "classID", "lat", "lng"],
          "data" : [["2014-10-09 12:00", "2014-10-22 12:00", "Drill Rig 2", "Well #25460a", "Drill", "Drilling", 28.9918178982105822080596059631954529631, -97.031232487493567941353227873406397599], ["2014-05-15 12:00", "2014-05-28 12:00", "Drill Rig 4", "Well #25478b", "Drill", "Drilling", 30.0091936612271929277981126740726330783, -97.960879498320778436959492909212107868], ["2014-06-13 12:00", "2014-06-27 12:00", "Drill Rig 2", "Well #25462d", "Drill", "Drilling", 27.8853481154214236160058813484160210534, -96.622063710372619474843423131492707551]]
        };

      var map, featureLayer;

      require([
        "esri/geometry/Point","esri/TimeExtent",
        "esri/map", "esri/graphic","esri/InfoTemplate","esri/layers/FeatureLayer","dojo/_base/array",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/Color","esri/dijit/HistogramTimeSlider","dojo/dom-construct", 
        "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",
        "dijit/form/Button", "dijit/form/Textarea",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
        ], function(
          Point,TimeExtent,Map, Graphic,InfoTemplate,FeatureLayer,arrayUtils,
          SimpleMarkerSymbol, Color,HistogramTimeSlider,domConstruct,
          number, parser, dom, registry
          ) {
          parser.parse();

          map = new Map("mapDiv", { 
            basemap: "streets",
            center: [ -98.428618642622013485086900455532602058,28.6208905773702750504179180306120159523],
            zoom: 6
          });


          map.infoWindow.resize(200,125);

          var timeExtent = new TimeExtent();
          timeExtent.startTime = new Date("July 1, 2014 11:13:00 GMT-0700");
          timeExtent.endTime = new Date("July 2, 2015 11:13:00 GMT-0700");
          map.setTimeExtent(timeExtent);

          

          var symbol = new SimpleMarkerSymbol();
          symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
          symbol.setColor(new Color([153,0,51,0.75]));
          //create a feature collection for the wells
          var featureCollection = {
            "layerDefinition": null,
            "featureSet": {
              "features": [],
              "geometryType": "esriGeometryPoint"
            }
          };

          featureCollection.layerDefinition = {
            "geometryType": "esriGeometryPoint",
            "objectIdField": "ObjectID",
            "type": "Feature Layer",
            "typeIdField": "",
            "drawingInfo": {
              "renderer": {
                "type": "simple",
                "symbol": {
                  "type": "esriSMSCircle",
                  "color": [153,0,51,0.75],
                  "width": 20,
                  "height": 20
                }
              }
            },
            "fields": [{
              "name": "ObjectID",
              "alias": "ObjectID",
              "type": "esriFieldTypeOID"
            }, {
              "name": "wellId",
              "alias": "WellId",
              "type": "esriFieldTypeString"
            }, {
              "name": "longitude",
              "alias": "Longitude",
              "type": "esriFieldTypeDouble"
            }, {
              "name": "latitude",
              "alias": "Latitude",
              "type": "esriFieldTypeDouble"
            },
            {
              "name": "dateStart",
              "alias": "DateStart",
              "type": "esriFieldTypeDate"
            },
            {
              "name": "dateEnd",
              "alias": "DateEnd",
              "type": "esriFieldTypeDate"
            }
            ],
            "timeInfo":{
              "startTimeField":"dateStart",
              "endTimeField":"dateEnd",
              "hasLiveData":false,
              "timeInterval":0,
              "timeIntervalUnits":"",
              "trackIdField":"",
              "timeExtent": ["July 1, 2014 11:13:00 GMT-0700","July 2, 2015 11:13:00 GMT-0700"],
              "timeReference": {"respectsDaylightSaving":false,"timeZone": "GMT-0700"},
              "exportOptions":{ 
                "useTime": true,
                "timeDataCumulative": false,
                "timeOffset": 0,
                "timeOffsetUnits": "esriTimeUnitsCenturies"}
              }
              
            };
            

            var infoTemplate = new InfoTemplate(
              "Location", 
              "Well: ${wellId}<br />Longitude: ${longitude}<br />latitude: ${latitude}"
              );
          //create a feature layer based on the feature collection
          
          featureLayer = new FeatureLayer(featureCollection, {
            id: 'wellLayer',
            infoTemplate: infoTemplate,
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields:["*"]
          });

          
          var features = [];
          var counter=0
          arrayUtils.forEach(data.data, function(well) {
            point = new Point({
              longitude: well[7],
              latitude: well[6]
            });

            var attributes = { 
              ObjectID: counter,
              wellId: well[3], 
              longitude:  well[7], 
              latitude: well[6],
              dateStart: new Date(well[0]).getTime(),
              dateEnd: new Date(well[1]).getTime()
            }; 
            counter+=1;
            var graphic = new Graphic(point, symbol, attributes, null);
            featureLayer.add(graphic);
            //features.push(graphic);
          });

          //featureLayer.applyEdits(features, null, null);
          
          var layerUpdateEnd = featureLayer.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/en/javascript/jshelp/intro_formatinfowindow.html
              dateFormat: "DateFormat(selector: 'date', fullYear: true)",
              layers : [ featureLayer ],
              mode: "show_all",
              timeInterval: "esriTimeUnitsDays"
            };
            var slider = new HistogramTimeSlider(sliderParams, sliderElem);
            map.setTimeSlider(slider);
            domConstruct.destroy("loading");
            console.log(featureLayer);
          });
          
          map.addLayers([featureLayer]);
          

        });

</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 id="loading"></div>

</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>

MarcBate · ‎06-28-2016

I have the same problem