Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

244
Vistas
How do I render output (e.g. plots) in different custom written navs/tabs in a shiny app?

I would like to build something that equals the functionality of the shiny functions navbarPage() and navbarMenu(). However when I create two different tabs (NAVONE and NAVTWO in my app below) I am able to render output within the first tab (which is not hidden by default), but not able to render output within the second tab. Its not clear to me what differs between both content sections.

library(shiny)
if (interactive()) {
  options(device.ask.default = FALSE)
  
  ui = fluidPage(
    
    ###NAVBAR
    tags$div(class = 'nav',
             tags$button('NAVONE', class = 'navlinks', id = "defaultOpenNav", onclick = 'openNav(event, "NAVONE")'),
             tags$button('NAVTWO', class = 'navlinks', onclick = 'openNav(event, "NAVTWO")')),
    
    ###NAVCONTENT
    tags$div(class = 'navcontent', id = 'NAVONE',
             actionLink(inputId = "actnOne", "click to create plot for nav one"),
             plotOutput(outputId = "plotOne")),
    
    tags$div(class = 'navcontent', id = 'NAVTWO',
             actionLink(inputId = "actnTwo", "click to create plot for nav two"),
             plotOutput(outputId = "plotTwo")),
    
    ###JAVASCRIPT
    tags$script(HTML(
      
      "function openNav(evt, NavToOpen) {
        // Declare all variables
        var i, navcontent, navlinks;

        // Get all elements with class = 'navcontent' and hide them
        navcontent = document.getElementsByClassName('navcontent');
        for (i = 0; i < navcontent.length; i++) {
        navcontent[i].style.display = 'none';
        }

        // Get all elements with class = 'tablinks' and remove the class 'active'
        document.getElementById(NavToOpen).style.display = 'block';
        evt.currentTarget.className += ' active';
        }

        // navcontent to be open by default
        document.getElementById('defaultOpenNav').click();"
    ))
  )
  
  server = function(input, output, session){
    
    ###PLOT FOR NAV ONE
    observeEvent(input$actnOne, {
      output$plotOne = renderPlot({
        hist(iris$Sepal.Length)
      })
    })
    
    ###PLOT FOR NAV TWO
    observeEvent(input$actnTwo, {
      output$plotTwo = renderPlot({
        hist(iris$Sepal.Length)
      })
    })
  }
  shinyApp(ui, server)
}
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda