Update y-axis range when x-axis rangeslider is used

[wave-electron]

This is what currently happens with Plotly when using the range slider. If a short interval x-axis range from the slider is selected, the displayed trace(s) could become quasi flat:

This occurs because the y-axis range is not updating when using the range slider. IMHO this seems to defeat the point of having a range slider.

Others have already realised this and have implemented a solution in the JS version of Plotly.

Javascript solution

To achieve updating y axis range, it listens to plotly_relayout event, use it's eventdata (xaxis.range) to filter the data, and redraw the plot with filtered data.

The only remaining issue is that the range slider y axis changes and therefore does not display the traces in full.

Is this feature something that could be easily implemented in the R version?

[cpsievert]

I'm not sure I agree this is a better default behavior -- especially considering that optimal aspect ratios depends on the context, and it's much easier to zoom in on the y-axis rather than zoom out.

That isn't to say we couldn't make it easier to opt-in to this behavior, but it would be better asked/implemented as a feature request in plotly.js -- https://github.com/plotly/plotly.js

FWIW, you can already take advantage of that Javascript solution from R via htmlwidget::onRender()

[wave-electron]

Firstly, thank you for the tip about using htmlwidget::onRender() ... that help me get it working in my own app :)

However, it still probably worth at least visually demonstrating here with two charts how the default behaviour is falling short... particularly when it comes to charting financial stocks.

The first chart is the APPLE stock without Y-scaling implemented. Its very evident the trace becomes quasi-flat.

With the Y-scaling implemented using the onRender method.... it maintains a much superior aspect ratio in the 2nd chart.

[cox-michael]

I'm trying to solve this same issue with plotly range buttons on a Shiny app. Could you share your code you used to fix it in R? I read through the Javascript solution you posted, but unfortunately for me, my javascript skills are rusty. Since it is a Shiny web app, is it possible for me to put javascript in the head of the document to fix the y-axis scaling?

Here's an example of what I need to fix:

shinyApp(
  ui = fluidPage(
    tags$head(tags$script("//some javascript here")),
    plotlyOutput('myChart')
    ),
  server = function(input, output){
    x <- data.frame(Date = seq(Sys.Date()-365, Sys.Date(), by = 1), Value = 366:1)
    
    p <- plot_ly(x = x$Date, y = x$Value, type = 'scatter', mode = 'lines') %>%
      layout(
        xaxis = list(type = 'date', rangeselector = list(
          buttons = list(
            list(count = 30, label = "30 days", step = "day", stepmode = "backward")
            , list(step = "all", label = 'All')
          )
        ))
      )
    output$myChart = renderPlotly(p)
  }
)

[cpsievert]

@ldsmike88 just FYI, a support plan might be worthwhile in your case -- https://support.plot.ly/plans

[wave-electron]

you have to use the onRender() method and add it to the plotly object.

 p <- plot_ly(x = x$Date, y = x$Value, type = 'scatter', mode = 'lines') %>%
                layout(
                        xaxis = list(type = 'date', rangeselector = list(
                                buttons = list(
                                        list(count = 30, label = "30 days", step = "day", stepmode = "backward")
                                        , list(step = "all", label = 'All')
                                )
                        ))
                ) %>% onRender(javascript goes here......)

But to be honest... until y-scaling is built into plotly its not a desirable solution.

For this reason I'm now using highcharter which has built in scaling. You can solve your y-scaling problems doing this.

library("shiny")
library("highcharter")

ui <- fluidPage(
        h1("Highcharter Demo"),
        fluidRow(
                column(width = 8,
                       highchartOutput("hcontainer",height = "500px")
                )
        )
)

server = function(input, output) {
     
       x <- data.frame(Date = seq(Sys.Date()-365, Sys.Date(), by = 1), Value = 366:1)
       # create xts: Extensible Time Series object
       qxts <- xts(x[,-1], order.by=x[,1])
     
        
        output$hcontainer <- renderHighchart({
                
             hc <- highchart(type = "stock") %>% hc_add_series(qxts, type = "line") 
        
               
          hc      
        })
        
}

shinyApp(ui = ui, server = server)

[cox-michael]

Highcharter looks very good, but unfortunately, you have to pay for commercial use. I ended up using Dygraphs. Not as graphically pleasing as Highcharter or Plotly, but it got the job done. Here's my code:

  library(shiny)
  library(xts)
  library(dygraphs)
  shinyApp(
    ui = fluidPage(
      radioButtons('pPlotSelector', '', c('30 days', 'All'), inline = TRUE),
      dygraphOutput('myChart')
    ),
    server = function(input, output){
      observe({
        x <- data.frame(Date = seq(Sys.Date()-365, Sys.Date(), by = 1), Value = 366:1)
        rownames(x) <- x$Date
        x <- as.xts(x[, 2, drop = FALSE])
        
        window <- switch(input$pPlotSelector,
                         '30 days' = c(Sys.Date()-30, Sys.Date()),
                         'All' = NULL
        )
        
        output$myChart = renderDygraph(
          dygraph(x) %>%
            dyRangeSelector(dateWindow = window)
        )
      })
    }
  )

Thanks for all of your help!

[cpsievert]

#1040 enables you to modify plotly graphs in shiny using the plotly.js API. I've made a demo which addresses this issue. Try it out with:

devtools::install_github("ropensci/plotly#1040")
library(plotly)
demo("proxy-relayout", package = "plotly")

[cox-michael]

It crashed for me as soon as I tried to change the slider range.

[cpsievert]

Interesting, mind reporting the output you see in the R console? Also, the output of devtools::session_info()?

[cox-michael]

I'm using R version 3.2.3 (2015-12-10). The error is:

Error in plotlyProxy: could not find function "startsWith"

[cpsievert]

Ah, good to know, thanks! Should be fixed now, try reinstalling.

[cox-michael]

I got it working with my example. Your demo seemed to be too much for my system to handle. It kept crashing RStudio.

shinyApp(
  ui = fluidPage(
    plotlyOutput('plot')
  ),
  server = function(input, output, session){
    x <- data.frame(Date = seq(Sys.Date()-365, Sys.Date(), by = 1), Value = 366:1)
    
    p <- plot_ly(x = x$Date, y = x$Value, type = 'scatter', mode = 'lines') %>%
      layout(
        xaxis = list(type = 'date', rangeselector = list(
          buttons = list(
            list(count = 30, label = "30 days", step = "day", stepmode = "backward")
            , list(step = "all", label = 'All')
          )
        )
        , rangeslider = list(type = "date")
        )
      )
    output$plot = renderPlotly(p)
    
    observeEvent(event_data("plotly_relayout"), {
      d <- event_data("plotly_relayout")
      xmin <- if (length(d[["xaxis.range[0]"]])) d[["xaxis.range[0]"]] else d[["xaxis.range"]][1]
      xmax <- if (length(d[["xaxis.range[1]"]])) d[["xaxis.range[1]"]] else d[["xaxis.range"]][2]
      if (is.null(xmin) || is.null(xmax)) return(NULL)
      
      # compute the y-range based on the new x-range
      idx <- with(x, xmin <= Date & Date <= xmax)
      yrng <- extendrange(x$Value[idx])
      
      plotlyProxy("plot", session) %>%
        plotlyProxyInvoke("relayout", list(yaxis = list(range = yrng)))
    })
  }
)

It works fine whenever you click "30 days" or use the range slider, but it doesn't relayout when you click "All." Not a big deal. I can work with this. Thanks for all your help! Do you anticipate plotlyProxy being included in an official release soon?

[cpsievert]

It kept crashing RStudio.

Interesting...does it work in a modern browser (e.g., firefox/chrome)?

It works fine whenever you click "30 days" or use the range slider, but it doesn't relayout when you click "All."

Yep, same for me, feel free to improve on it ;)

Do you anticipate plotlyProxy being included in an official release soon?

Hopefully next week or sooner

[wave-electron]

@cpsievert Awesome work!