Using a colored timevis timeline in a Shiny app

Question

I'm using the package 'timevis' to create a timeline in my RShiny dashboard app. I want to visualize some planned deadlines of when to check machines for their maintenance. In the timeline, both executed checks and planned checks are visible. To visualize these different checks, I want to give it different colors (green for executed and red for planned). I succeeded to do this in a test environment, but when I copy the code in my dashboard, the colors are not visible (all blocks are just standard blue).

This is my code: test:

timevisData <- data.frame(content = tijdlijntabel$machine_nr, 
                          start = tijdlijntabel$onderhoud_datum,
                          group = tijdlijntabel$onderhoud_type,
                          style = tijdlijntabel$style)

groups <- data.frame(id = c("Klep", "Reinigen", "Zeeppomp"), content = c("Klep", "Reinigen", "Zeeppomp"))
timevis(data = timevisData, groups = groups, showZoom = TRUE, options = list(editable = TRUE)) %>%
  setWindow(Sys.Date() %m-% months(1), Sys.Date() %m+% months(1))

The timevisData dataframe contains: the machine_nr (displayed in the timeline blocks), the date of the check, the type of check (3 types of checks) and the style (the color: "border-color: red; color: white; background-color: red" or "border-color: green; color: white; background-color: green"). In this screenshot, the first part of the data is shown: enter image description here

This is an example of how I want my timeline to be in the dashboard: enter image description here

This is the code of my dashboard: ui.R:

fluidPage(
                h3("Overzicht uitgevoerde en voorgestelde onderhoudsbeurten"),
                timevisOutput("timeline_aalst")
              ),

server.R:

output$timeline_aalst <- renderTimevis({
    
    groups <- data.frame(id = c("Klep", "Reinigen", "Zeeppomp"), content = c("Klep", "Reinigen", "Zeeppomp"))
    timevis(data = timevisData, groups = groups, showZoom = TRUE, options = list(editable = TRUE)) %>%
      setWindow(Sys.Date() %m-% months(1), Sys.Date() %m+% months(1))
  })

Please provide an [MRE](https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example), i.e. a running shiny app and the necessary example data. Thanks! — starja, Dec 19 '20 at 12:32
I don't know how to provide a running example of my app. The data in the dashboard is confidential. The necessary data is the data in dataframe timevisData. I just added it in my question. — Eline Haldermans, Dec 19 '20 at 14:43
Please list all the packages you use to make it run and have a complete `ui`/`server`/`shinyApp` part that runs when you paste the code. For the data, please make up some fake data in the style of your original data and paste the code how to make the example data data.frame or the output of `dput` — starja, Dec 19 '20 at 15:17

score 1 · Accepted Answer · answered Dec 19 '20 at 17:32

As mentioned in the comments, it is very helpful when sample data is provided (as part of a minimal working example).

Here I tried to recreate an example you can work from. You might want to take advantage of className to provide items with individual CSS styles. I added tags$style to your ui based on what you described for red and green.

library(shiny)
library(timevis)
library(lubridate)

timevisData <- data.frame (
  id          = 1:3,
  content     = c("Klep", "Reinigen", "Zeeppomp"),
  group       = c("Klep", "Reinigen", "Zeeppomp"),
  start       = c("2020-12-10", "2020-12-16", "2020-12-30"),
  end         = NA,
  className   = c("green_style", "green_style", "red_style")
)

groups <- data.frame(
  id = c("Klep", "Reinigen", "Zeeppomp"), 
  content = c("Klep", "Reinigen", "Zeeppomp")
)

ui <- fluidPage(
  title = "Testing with className",
  h3("Overzicht uitgevoerde en voorgestelde onderhoudsbeurten"),
  tags$head(
    tags$style(HTML(".red_style   { border-color: red; color: white; background-color: red; }
                     .green_style { border-color: green; color: white; background-color: green; }
                    "))
    ),
  timevisOutput("timeline_aalst")
)

server <- function (input, output, session) {
  output$timeline_aalst <- renderTimevis ({
    timevis (data = timevisData, groups = groups, showZoom = TRUE, options = list(editable = TRUE)) %>%
      setWindow(Sys.Date() %m-% months(1), Sys.Date() %m+% months(1))
  })
}

shinyApp(ui = ui, server = server)

Output

@jqueryHtmlCSS I meant sharing some of Eline's data - or providing some "fake data" to work with. It helps to understand the data structure to work with. You can use `dput(head(df, n))` if `df` is a data frame to share the first `n` rows of the dataset. For more details, see [this post](https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example). — Ben, Dec 20 '20 at 16:19

Using a colored timevis timeline in a Shiny app

1 Answers1