Shiny app - hide/show text comment under the plot after clicking checkbox

Question

I want to build an app with the checkbox asking whether to show additional text comments under the figures.

I would like to display set of plots with or without an explanation - this shall be left to the user, whether they need more info or not.

Here are some dummy comments: #info for box1: "This is the red histogram"

#info for box2: "This is the blue histogram"

Here is a dummy app:

library(shiny)
library(shinydashboard)


data <-  rnorm(10000, mean=8, sd=1.3)
variable <- "This is the blue histogram"

shinyApp(
  ui = dashboardPage(
    skin = "black",
    dashboardHeader(
      title = "Example app",
      titleWidth = 300
    ),
    dashboardSidebar(
      checkboxInput("show_comment",
                    label = "Show comment?",
                    value = FALSE)
    ),
    dashboardBody(
      box(title = "First histogram",
          status= "warning",
          plotOutput("plot1", height=300)

      ),

      box(title = "Second histogram",
          status= "warning",
          plotOutput("plot2", height=300),
          hidden(
            div(id='text_div',
                verbatimTextOutput("text")))

      )

    )
  ),
  server = function(input, output) {

    output$plot1 <- renderPlot({
      hist(data, breaks=40, col="red", xlim=c(2,14), ylim=c(0,800))
    })

    output$plot2 <- renderPlot({
      hist(data, breaks=20, col="blue", xlim=c(2,34), ylim=c(0,1000))
    })


    observeEvent(input$show_comment, {
      toggle('text_div')
      output$text <- renderText({ paste0(variable)})
    })


  }
)

The above code does not work properly - it displays comment no matter if the checkbox is clicked or not. I'd like to make it work, therefore seek for advice here.

I was trying to do it on my own using following hints, to no avail: How to use shiny actionButton to show & hide text output?

This syntax is too complex for me as I am a beginner with shiny, so I was not able to troubleshoot my problem with hints from this thread: Show and hide text in modularized shiny app based on actionButton() and shinyJS()

I also tried ths: Hide/show outputs Shiny R

And here is the attempt of using above hint: library(shiny) library(shinydashboard)

data <-  rnorm(10000, mean=8, sd=1.3)
variable <- "This is the blue histogram"

shinyApp(
  ui = dashboardPage(

    skin = "black",
    dashboardHeader(
      title = "Example app",
      titleWidth = 300
    ),
    dashboardSidebar(
      checkboxInput("show_comment",
                    label = "Show comment?",
                    value = FALSE)
    ),
    dashboardBody(
      box(title = "First histogram",
          status= "warning",
          plotOutput("plot1", height=300)

      ),

      box(title = "Second histogram",
          status= "warning",
          plotOutput("plot2", height=300),
          renderText("text", span(variable))

      )

    )
  ),
  server = function(input, output) {

    output$plot1 <- renderPlot({
      hist(data, breaks=40, col="red", xlim=c(2,14), ylim=c(0,800))
    })

    output$plot2 <- renderPlot({
      hist(data, breaks=20, col="blue", xlim=c(2,34), ylim=c(0,1000))
    })


    observeEvent(input$show_comment, {
      # every time the button is pressed, alternate between hiding and showing the plot
      toggle("text")
    })


  }
)

I want to put the comments inside the same box, along with the plot - this is why I am trying to enclose it with the box command. However, if it is impossible - I would be glad of any other solution.

score 1 · Accepted Answer · answered Oct 16 '22 at 18:21

First time I use shinyjs so there might be a better approach. But as I understand it from the docs you first have to add useShinyjs() in your UI code

in order for all other shinyjs functions to work.

Second, there is no need to wrap the div for your comment in hidden(). Third, instead of using observeEvent I followed the example in ?toggle and use an observe where I add the state of your checkbox as the condition to trigger the toggle.

library(shiny)
library(shinydashboard)
library(shinyjs)

data <- rnorm(10000, mean = 8, sd = 1.3)
variable <- "This is the blue histogram"

shinyApp(
  ui = dashboardPage(
    skin = "black",
    dashboardHeader(
      title = "Example app",
      titleWidth = 300
    ),
    dashboardSidebar(
      checkboxInput("show_comment",
        label = "Show comment?",
        value = FALSE
      )
    ),
    dashboardBody(
      box(
        title = "First histogram",
        status = "warning",
        plotOutput("plot1", height = 300)
      ),
      box(
        title = "Second histogram",
        status = "warning",
        plotOutput("plot2", height = 300),
        div(id = "text_div",
            verbatimTextOutput("text")
          )
      )
    ),
    useShinyjs()
  ),
  server = function(input, output) {
    output$plot1 <- renderPlot({
      hist(data, breaks = 40, col = "red", xlim = c(2, 14), ylim = c(0, 800))
    })

    output$plot2 <- renderPlot({
      hist(data, breaks = 20, col = "blue", xlim = c(2, 34), ylim = c(0, 1000))
    })

    observe({
      toggle(id = "text_div", condition = input$show_comment)
      output$text <- renderText({
        paste0(variable)
      })
    })
  }
)
#> 
#> Listening on http://127.0.0.1:7437

Shiny app - hide/show text comment under the plot after clicking checkbox

1 Answers1