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>
