RangeSelector change Default value

plotly.js
1

Hey All,
Trying to figure out how to change the default rangeSelector from ‘all’ to some other choice.
couldn’t find an answer.

Thanks

3 Likes
2

Here’s how: http://codepen.io/etpinard/pen/worOOb?

3

Thanks for the reply.
I must have explained my problem wrong.
I meant, how do I set the default selector to be ‘24hr’ instead of ‘all’?

2 Likes
4

@melmell I understand it. You mean something like this to set the default at the beginning (active: true).
I don’t find something in the reference.

    buttons: [{
            step: 'month',
            stepmode: 'backward',
            count: 1,
            label: '1m',
            active: true
        }, {
            step: 'month',
            stepmode: 'backward',
            count: 6,
            label: '6m'
        }, {
            step: 'year',
            stepmode: 'todate',
            count: 1,
            label: 'YTD'
        }, {
            step: 'year',
            stepmode: 'backward',
            count: 1,
            label: '1y'
        }, {
            step: 'all',
            label: 'all'
        }],
1 Like
5

excellent. Thank you

6

Sorry I wrongly express me. The code I postet not works. What I mean is, that I would expect there is e.g. the attribute active to set one of the rangeselector-options to active. But the exactly syntax I don’t know, because I don’t find something in the reference. Maybe there is currently nothing to achieve your goal.
Maybe @etienne nows that:-)

(An workaround could be to let click the specific button after the plot is finished. via element.click() )

2 Likes
7

I’ve put some code together that wraps up the range selector and allows a default to be set. You can get it at https://github.com/danio/plotly_tools/blob/master/range.py

You’d use it, for example, like (assuming you have created a plotly Figure called figure):
add_range_selector(figure.layout, ranges=[‘14d’, ‘3m’, ‘1y’, ‘ytd’, ‘all’], default=‘3m’)

It might be nice to have something like this in plotly tools.py, but as this depends on dateutil I doubt they would go for it.

1 Like
8

Kind of hack:- fix date range to be current date to one day back [range: [‘2018-09-15’, ‘2018-09-16’]]
var layout = {
title: ‘Time Series with Rangeslider’,
xaxis: {
autorange: false,
range: [‘2017-02-15’, ‘2017-02-16’],
rangeselector: {buttons: [
{
count: 1,
label: ‘1d’,
step: ‘day’,
stepmode: ‘todate’,
},
{
step: ‘day’,
stepmode: ‘todate’,
count: 7,
label: ‘1w’
},
{
count: 1,
label: ‘1m’,
step: ‘month’,
stepmode: ‘todate’
},
{
count: 3,
label: ‘3m’,
step: ‘month’,
stepmode: ‘todate’
},
{
count: 6,
label: ‘6m’,
step: ‘month’,
stepmode: ‘todate’
},
{
step: ‘all’,
stepmode: ‘todate’
}
]},
rangeslider: {range: [‘2015-03-01’, ‘2018-09-16’]},
type: ‘date’
},
yaxis: {
autorange: true,
range: [86, 138.870004167],
type: ‘linear’
}
};

2 Likes