Range Slider fixed x0-x1 range

Plotly R, MATLAB, Julia, Net Plotly R
1

Hello,

Is it possible to get, set and lock the range values of the range slider ?

For example, I’d like to always have a range equals to 1 month (assuming my x axis is type=“date”).
Also I’d like to have two buttons below the range slider making possible to “go to the Prev month” (adding -1 month to x0 and x1 values) and “go to the Next month” (adding +1 month to x0 and x1 values).
Which means have access to the x0 and x1 values of the range slider.

Thanks,

2

You can try something using Plotly.relayout(gd, 'xaxis.rangeslider.range', [/* */]), but hmm I can’t think of an easy way to do this.

If you share a example of what you’ve tried so far, we’ll be able to give hints and tips.

3

Ok, thanks I’ll try with Ploty.relayout if I can figure it out.

Here is an example of what I try to do :

As a shiny app :

server.R

shinyServer(function(input, output, session) {
  
GetData <- reactive({
    data <- data.frame(Date = seq(from = as.Date("2015-01-01"), to = as.Date("2017-01-01"), by = "days"), 
                       Values = sample(seq(from = 20, to = 50, by = 5), size = 732, replace = TRUE))
    return(data)
  })
  
  output$graph <- renderPlotly({
    data <- GetData()
    graph <- plot_ly()
    graph <- graph %>% add_trace(data = data,
                                 x = data$Date,
                                 y = data$Values,
                                 name = "test",
                                 mode= "lines",
                                 type =  "scatter")
    graph <- graph %>% layout(xaxis = list(rangeslider = list(type = "date")  ))
  })
})

ui.R

library(shiny)
library(plotly)

shinyUI(fluidPage(
  mainPanel(
    plotlyOutput("graph")
  )
))

I’d like to fix the range of the slider to 1 month.
For example from the “2015-01-01” to the “2015-02-01” (yyyy-mm-dd).
And whatever the user do with the range slider, it will keep a 1 month range.
For example, if you move the left cursor to the “2016-03-05”, the right cursor will automaticly move at the “2016-04-05”.

4

The range slider works by setting the x-axis to whatever date interval you specify. I have a chart which has buttons for, day, month, 3months,6months, YTD, All etc. When you select say the button for day… it scales the x-axis to 1 day… and when you slide back and forth it stays on the scale of 1 day.

Screen Shot 2017-03-02 at 10.30.22 pm.png1206×378 73.9 KB

Here is the code for a button set to month… in your shiny code.

library(shiny)
library(plotly)

ui <- shinyUI(fluidPage(
        mainPanel(
                plotlyOutput("graph")
        )
))


server <- shinyServer(function(input, output, session) {
        
        GetData <- reactive({
                data <- data.frame(Date = seq(from = as.Date("2015-01-01"), to = as.Date("2017-01-01"), by = "days"), 
                                   Values = sample(seq(from = 20, to = 50, by = 5), size = 732, replace = TRUE))
                return(data)
        })
        
        output$graph <- renderPlotly({
                data <- GetData()
                graph <- plot_ly()
                graph <- graph %>% add_trace(data = data,
                                             x = data$Date,
                                             y = data$Values,
                                             name = "test",
                                             mode= "lines",
                                             type =  "scatter")
                graph <- graph %>% layout( xaxis = list(
                        rangeselector = list(
                                buttons = list(
                                        list(
                                                count = 1,
                                                label = "1 mo",
                                                step = "month",
                                                stepmode = "backward")      
                                        list(step = "all"))),
                        
                        rangeslider = list(type = "date"))
                )
        })
})

shinyApp(ui = ui, server = server)

Edit: You can remove the “all” button from my code… i left it there so you could see the syntax for multiple buttons. Note: when sliding - you have to slide from the whited out zone - you should see horizontal arrows to show where to slide from… if you slide in the shaded zone it would drag the range slider to a new custom range.

5

Thanks a lot.
Is there anyway to make it impossible to drag the range slider to a new custom range ?
Which means if you slide in the shaded zone, it will also slide the other shaded zone keeping the same range.

6

Yes, you can slide the range back & forth along its axis, whilst maintaining the month range.