Line graph in Shiny app does not work

kuttan98 · October 17, 2022, 10:00am

Hi,
I have a dataset where I have to monitor the number of surveys done each day. Here I have a variable "submission_date" with a time stamp attached to it. But when I give the date filter in the app, it does not work. I want a line graph to appear according to the date. How can I achieve this?

library(tidyverse)
library(shiny)
library(shinydashboard)
#> 
#> Attaching package: 'shinydashboard'
#> The following object is masked from 'package:graphics':
#> 
#>     box
library(janitor)
#> 
#> Attaching package: 'janitor'
#> The following objects are masked from 'package:stats':
#> 
#>     chisq.test, fisher.test
library(plotly)
#> 
#> Attaching package: 'plotly'
#> The following object is masked from 'package:ggplot2':
#> 
#>     last_plot
#> The following object is masked from 'package:stats':
#> 
#>     filter
#> The following object is masked from 'package:graphics':
#> 
#>     layout
data<-tibble::tribble(
             ~submission_date, ~enumerator,   ~en_id,
        "2022-07-03 09:49:30",    "Gandhi", "BEN001",
        "2022-07-03 11:40:04",     "Nehru", "BEN002",
        "2022-07-03 11:48:58",     "Patel", "BEN003",
        "2022-07-03 13:10:37",    "Gandhi", "BEN001",
        "2022-07-03 13:12:28",     "Nehru", "BEN002",
        "2022-07-04 13:12:08",     "Patel", "BEN003",
        "2022-07-04 13:12:20",    "Gandhi", "BEN001",
        "2022-07-04 13:12:30",     "Nehru", "BEN002",
        "2022-07-04 13:12:30",     "Patel", "BEN003",
        "2022-07-08 14:45:23",    "Gandhi", "BEN001",
        "2022-07-08 14:45:24",     "Nehru", "BEN002",
        "2022-07-08 15:25:03",     "Patel", "BEN003",
        "2022-07-08 15:25:24",    "Gandhi", "BEN001",
        "2022-07-08 15:25:46",     "Nehru", "BEN002",
        "2022-07-08 15:25:51",     "Patel", "BEN003",
        "2022-07-08 15:25:55",    "Gandhi", "BEN001",
        "2022-07-08 15:25:59",     "Nehru", "BEN002",
        "2022-07-08 15:26:08",     "Patel", "BEN003"
        )

ui<-dashboardPage(
  dashboardHeader(title = "Test"),
  dashboardSidebar("Choose your inputs here",
                   selectInput("date","select the date",choices = data$submission_date)),
  dashboardBody(
    tabPanel(plotlyOutput("plot1"))
  )
)

server<-function(input,output,session){
  
  filtered<-reactive({
    data %>% 
      filter(submission_date %in% input$date) %>% 
      group_by(submission_date) %>% 
      summarise(number_of_surveys=n())
  })
  
  output$plot1<-renderPlotly({
    graph1<-ggplot(filtered(),aes(submission_date,number_of_surveys))+
    geom_line(size=1.5)+
    theme_minimal()+
      labs(title = "Day-wise number of surveys",
           x="Date of survey",
           y="# of surveys")
    
    ggplotly(graph1)
  })
}

shinyApp(ui,server)
#> PhantomJS not found. You can install it with webshot::install_phantomjs(). If it is installed, please make sure the phantomjs executable can be found via the PATH variable.
Shiny applications not supported in static R Markdown documents
Created on 2022-10-17 by the reprex package (v2.0.1)

ismirsehregal · October 17, 2022, 12:38pm

shinydashboard's sidebar is intended to navigate menuItems which point to corresponding tabItems in the dashboardBody.

If you don't follow this structure nothing is displayed.

I'd recommend using shinydashboardPlus::dashboardControlbar() to display inputs:

library(tidyverse)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(plotly)

data <- tibble::tribble(
  ~submission_date, ~enumerator,   ~en_id,
  "2022-07-03 09:49:30",    "Gandhi", "BEN001",
  "2022-07-03 11:40:04",     "Nehru", "BEN002",
  "2022-07-03 11:48:58",     "Patel", "BEN003",
  "2022-07-03 13:10:37",    "Gandhi", "BEN001",
  "2022-07-03 13:12:28",     "Nehru", "BEN002",
  "2022-07-04 13:12:08",     "Patel", "BEN003",
  "2022-07-04 13:12:20",    "Gandhi", "BEN001",
  "2022-07-04 13:12:30",     "Nehru", "BEN002",
  "2022-07-04 13:12:30",     "Patel", "BEN003",
  "2022-07-08 14:45:23",    "Gandhi", "BEN001",
  "2022-07-08 14:45:24",     "Nehru", "BEN002",
  "2022-07-08 15:25:03",     "Patel", "BEN003",
  "2022-07-08 15:25:24",    "Gandhi", "BEN001",
  "2022-07-08 15:25:46",     "Nehru", "BEN002",
  "2022-07-08 15:25:51",     "Patel", "BEN003",
  "2022-07-08 15:25:55",    "Gandhi", "BEN001",
  "2022-07-08 15:25:59",     "Nehru", "BEN002",
  "2022-07-08 15:26:08",     "Patel", "BEN003"
)


ui <- shinydashboardPlus::dashboardPage(
  header = dashboardHeader(title = "Test"),
  sidebar = dashboardSidebar(sidebarMenu(
    menuItem(
      "Dashboard",
      tabName = "dashboard",
      icon = icon("dashboard")
    )
  )),
  body = dashboardBody(tabItems(
    tabItem(tabName = "dashboard",
            plotlyOutput("plot1"))
  )),
  controlbar = dashboardControlbar(
    controlbarMenu(id = "menu",
                   controlbarItem(
                     strong("Choose your inputs here"),
                     selectInput("date", "select the date", choices = data$submission_date)
                   )),
    collapsed = FALSE,
    skin = "dark"
  )
)

server <- function(input, output, session) {
  filtered <- reactive({
    data %>%
      filter(submission_date %in% input$date) %>%
      group_by(submission_date) %>%
      summarise(number_of_surveys = n())
  })
  
  output$plot1 <- renderPlotly({
    graph1 <- ggplot(filtered(), aes(submission_date, number_of_surveys)) +
      geom_line(size = 1.5) +
      theme_minimal() +
      labs(title = "Day-wise number of surveys",
           x = "Date of survey",
           y = "# of surveys")
    ggplotly(graph1)
  })
}

shinyApp(ui, server)

kuttan98 · October 17, 2022, 4:00pm

Thanks for the response. But this does not solve my problem. The line graph still does not appear. My issue is that the line graph I want does not appear in the dashboard.

nirgrahamuk · October 17, 2022, 5:00pm

Your data doesn't contain proper Dates, it contains strings with the content which can be interpreted as date time.

have a look at this tibble:

mutate(data,
subdttm = parse_datetime(submission_date),
subdt = as.Date(subdttm))

what is date selection intended to do ? give you a single date to graph ? so not a line but a single vertical point ?
or if you want to do a line chart, do you intend to allow a start date and a stop date for the xaxis ? rather than a a single date ?

kuttan98 · October 17, 2022, 5:09pm

Date selection is for getting to know how many surveys have happened on that day. Hence I will have three dates in the example given- 3rd, 4th and 8th July. If I click 3rd July in the filter, the number of surveys completed will be shown on the line graph as a point. Then when I choose 4th July, a line appears connecting the two dates. Hence 3rd July is the start date and 8th July is the stop date. I hope it's clear now.

nirgrahamuk · October 17, 2022, 5:21pm

given what you said about having dates you should definitely learn from my example and base your code around subdt ; I find your description of how you invisage the UI driving the graph creation to not really make sense. Its a single UI picker, that can say be one of 3 dates at a time; it doesnt make sense to me to say you'll set it to some value and then set it to some other value and generate the range between. Thats just not how that works. probably an airdatepicker (shinyWidgets library) would be the way to go, as a single date or explicit range can be chosen (via a calendar control); or a conventional multi selectInput, from which you can get a min and max date (which can be the same for a single date).

kuttan98 · October 18, 2022, 4:31am

Thanks for the response. Actually my idea was something I got from Tableau. I thought a similar thing is possible in R. I get what you are saying. So I should use dateInput that's what you are implying?
I am getting the date variable now in the desired format after running the code you gave.

ismirsehregal · October 18, 2022, 9:12am

As already mentioned by @nirgrahamuk you can't draw a line based on a single datapoint.

Please check the following:

library(tidyverse)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(plotly)

data <- tibble::tribble(
  ~submission_date, ~enumerator,   ~en_id,
  "2022-07-03 09:49:30",    "Gandhi", "BEN001",
  "2022-07-03 11:40:04",     "Nehru", "BEN002",
  "2022-07-03 11:48:58",     "Patel", "BEN003",
  "2022-07-03 13:10:37",    "Gandhi", "BEN001",
  "2022-07-03 13:12:28",     "Nehru", "BEN002",
  "2022-07-04 13:12:08",     "Patel", "BEN003",
  "2022-07-04 13:12:20",    "Gandhi", "BEN001",
  "2022-07-04 13:12:30",     "Nehru", "BEN002",
  "2022-07-04 13:12:30",     "Patel", "BEN003",
  "2022-07-08 14:45:23",    "Gandhi", "BEN001",
  "2022-07-08 14:45:24",     "Nehru", "BEN002",
  "2022-07-08 15:25:03",     "Patel", "BEN003",
  "2022-07-08 15:25:24",    "Gandhi", "BEN001",
  "2022-07-08 15:25:46",     "Nehru", "BEN002",
  "2022-07-08 15:25:51",     "Patel", "BEN003",
  "2022-07-08 15:25:55",    "Gandhi", "BEN001",
  "2022-07-08 15:25:59",     "Nehru", "BEN002",
  "2022-07-08 15:26:08",     "Patel", "BEN003"
)

data$submission_timestamp <- data$submission_date
data$submission_date <- as.Date(data$submission_date)

ui <- shinydashboardPlus::dashboardPage(
  header = dashboardHeader(title = "Test"),
  sidebar = dashboardSidebar(sidebarMenu(
    menuItem(
      "Dashboard",
      tabName = "dashboard",
      icon = icon("dashboard")
    )
  )),
  body = dashboardBody(tabItems(
    tabItem(tabName = "dashboard",
            plotlyOutput("plot1"))
  )),
  controlbar = dashboardControlbar(
    controlbarMenu(id = "menu",
                   controlbarItem(
                     strong("Choose your inputs here"),
                     selectInput("date", "select the date", choices = unique(data$submission_date), selected = min((data$submission_date)))
                   )),
    collapsed = FALSE,
    skin = "dark"
  )
)

server <- function(input, output, session) {
  filtered <- reactive({
    req(input$date)
    data %>%
      filter(submission_date %in% as.Date(input$date)) %>%
      group_by(submission_date) %>%
      summarise(number_of_surveys = n())
  })
  
  output$plot1 <- renderPlotly({
    plot_ly(
      data = filtered(),
      x = ~ submission_date,
      y = ~ number_of_surveys,
      type = "scatter",
      mode = "lines+markers"
    ) %>% layout(title = "Day-wise number of surveys", xaxis = list(title = "Date of survey"), 
             yaxis = list(title = "# of surveys"), legend = list(title=list(text='<b> bla... </b>')))
  })
}

shinyApp(ui, server)

kuttan98 · October 18, 2022, 2:46pm

I ran the code. But the line graph does not appear. I will shift to use dateInput.

ismirsehregal · October 18, 2022, 2:51pm

Did you read my above answer? You cannot draw a line based on a single datapoint. That is why a point is displayed instead of a line. Your filtering function returns only one y-value and one x-value (timestamp).

kuttan98 · October 18, 2022, 3:09pm

Oops, I thought you were saying with the code you sent, I can make a line graph. Sorry for that. But thank you, it works as you have said.

system · October 25, 2022, 3:09pm

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.