Marsenau
Marsenau

Reputation: 1155

Shiny Slider Input step by month

I am writing a shiny and and wanted a slider for the date. The date in my data are monthly and I would like to step forward one month at a time. The docs for the slider input say that the step value is either in second or days depending on the min/max parameter types. Currently I have:

sliderInput("slider", "Time", min=as.Date("2005-01-01"),
                              max=as.Date("2014-12-01"),
                              value=as.Date("2005-01-01"), step = 30,...)

I want to be able to step by month instead of by day but it doesn't seem possible from what they give me. Is there a snippet of js I could add that would give me this functionality?

Clarification Note: I have read the docs for this function and to my best understanding there is no base functionality for this. The time format parameter, upon testing, only changes the labels not the values. I have seen a couple posts that access the values of certain widgets and was wondering if this was possible. Eg)

<script type="text/javascript">
    $(document).ready(function() {
    var slider = $("#slider").slider();
 // override the default "nice" function.
    slider.nice = function(value) {
    var ref_date = new Date("2005-01-01");
 // each slider step is 1 day, translating to 24 * 3600 * 1000 milliseconds
    var slider_date = new Date(ref_date.getTime() + value * 24 * 3600 * 1000);
                          return [slider_date.getUTCFullYear(), 
                          slider_date.getUTCMonth() + 1, 
                          slider_date.getUTCDate()].join("-");
                          }
                          })

Upvotes: 22

Views: 13802

Answers (2)

Dmitry Ishutin
Dmitry Ishutin

Reputation: 451

This is a solution that I use, but first I'd like to explain the logic:

  1. As mentioned above, timeFormat argument of the sliderInput() function does not give the required 1-month-step functionality. Instead, it simply formats underlying daily data, so stepping remains intact at a daily increment.
  2. sliderInput() has another argument step which can be used to explicitly define the stepping increment. However, it requires a single integer as an input, and therefore doesn't accept vectors/ranges. Given that months are of different lengths, a single integer is not right to use here. I tried to use lubridate::months(1) and lubridate::period(1, units = "months") -- to no avail unfortunately as both were automatically converted to an integer of 30 once rendered by the app, hence monthly increments were not retained.

I found a solution with shinyWidgets::sliderTextInput() which creates a character slider.

Assuming your dates are stored as yyyy-mm-dd dates in column Date of table d:

sliderTextInput(
  inputId    = "myID",
  label      = "myLabel",
  choices    = as.yearmon(unique(d$Date)),
  selected   = c(as.yearmon(min(d$Date)), as.yearmon(max(d$Date))),
  grid       = TRUE,
  width      = "100%"
)

With this you always step at monthly increments. as.yearmon() is used so your app shows slider labels in the MMM YYYY format.

Bear in mind that slider output is a character, so you need to back-transform into date:

  • as.Date(as.yearmon(input$myID[1])) for a start
  • as.Date(as.yearmon(input$myID[2])) for an end

Upvotes: 11

Pork Chop
Pork Chop

Reputation: 29387

There is a timeFormat function within the sliderInput. For more information visit Slider Input Widget.

EDIT:

To get the dates out and use them later on in your analysis, much credit goes to this question First day of the month from a POSIXct date time using lubridate and the function provided by Roland.

rm(list=ls())
library(shiny)
monthStart <- function(x) {
  x <- as.POSIXlt(x)
  x$mday <- 1
  as.Date(x)
}
ui <- basicPage(sliderInput("slider", "Time", min = as.Date("2010-01-01"),max =as.Date("2014-12-01"),value=as.Date("2014-12-01"),timeFormat="%b %Y"),
                textOutput("SliderText")
                )
server <- shinyServer(function(input, output, session){

  sliderMonth <- reactiveValues()
  observe({
    full.date <- as.POSIXct(input$slider, tz="GMT")
    sliderMonth$Month <- as.character(monthStart(full.date))
  })
  output$SliderText <- renderText({sliderMonth$Month})
})
shinyApp(ui = ui, server = server)

enter image description here

Upvotes: 21

Related Questions