Following this example: https://plot.ly/javascript/range-slider/ I have the following code:
var imuPlot = document.getElementById('imuPlot');
var rawDataURL = 'https://raw.githubusercontent.com/plotly/datasets/master/2016-weather-data-seattle.csv';
var xField = 'Date';
var yField = 'Mean_TemperatureC';
Plotly.d3.csv(rawDataURL, function(err, rawData) {
if(err) throw err;
var data = prepData(rawData);
var layout = {
title: 'Motion Data',
xaxis: {
rangeslider: {}
},
yaxis: {
fixedrange: true
},
};
Plotly.plot('imuPlot', data, layout);
imuPlot.on('plotly_relayout', function(data){
$("#startTagField").val(data['xaxis.range'][0]);
$("#endTagField").val(data['xaxis.range'][1]);
});
var update = {
xaxis: {range: [15434005078.125, 805458100781.25], rangeslider: {}}
};
Plotly.relayout(imuPlot, update);
});
function prepData(rawData) {
var x = [];
var y = [];
rawData.forEach(function(datum, i) {
if(i % 100) return;
x.push(new Date(datum[xField]));
y.push(datum[yField]);
});
return [{
mode: 'lines',
x: x,
y: y
}];
}
Note the appended:
var update = {
xaxis: {range: [15434005078.125, 805458100781.25], rangeslider: {}}
};
Plotly.relayout(imuPlot, update);
The xaxis seems to get updated on the plot, but the rangeslider does not get updated. Am I missing another update call? Is there some way to access the d3 d3.slider().value([x1,x2])
function?
Thanks!