R ShinyDashBoard layout column layout

Question

I have the following code in my R Shiny dashboard body:

dashboardBody(
    tabBox(width = 12,
           tabPanel("US County Detail",
                fluidRow(width=12,
                         column(width=6, tableOutput("County_tbl")),
                         column(width=3, uiOutput("States_List")),
                         column(width=3, sliderInput("slider", "Threshold:", 0, 100, post = " %", 50))),
                fluidRow(width=12,
                         column(width=7, ''),
                         column(width=4, plotlyOutput("County_Map"))),
                fluidRow(width=12,
                         column(width=6, ''),
                         column(width=6, plotlyOutput("County_Chart")))
              )
            )
          )

Essentially with the code above I'm trying to produce a long data table in the first column with a drop down box and slider next to it in columns 2 and 3. Then next to the data table I want to show a map with a bar chart underneath.

However the map and the bar chart are currently being positioned right at the bottom of my long data table. Meaning you can't see them unless you scroll down. Any ideas how I can force the map and the chart underneath the drop down box and slider?

Thanks

Currently doing this:

When in fact I'm trying to get it up here:

Answer 1

HI Please provide a minimal reproducible code so it will help to replicate the issue. It is the issue of how you arrange your UI means fluidrow and column. I tried with the same and build a sample code on that.

[![library(shiny)
library(shinydashboard)
library(plotly)

ui <- dashboardPage(
  dashboardHeader(
    title = "Dashboard"),


  #sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"))
    )
  ),



dashboardBody(
  tabItems(
    tabItem(tabName='dashboard',
            tabBox(width = 12,
                   tabPanel("US County Detail",
                            fluidRow(
                              column(5,
                                     fluidRow(
                                       tableOutput("County_tbl")
                                     )
                                     ),
                              column(7,
                                     fluidRow(
                                       column(6,
                                              uiOutput("States_List")
                                              ),
                                       column(6,
                                              sliderInput("slider", "Threshold:", 0, 100, post = " %", 50)
                                              )
                                              ),
                                     fluidRow(
                                       column(12,
                                              plotlyOutput("County_Map")
                                              )
                                            ),
                                     fluidRow(
                                       column(12,
                                              plotlyOutput("County_Chart")
                                              )

                                     )

                                     )
                            )
                   )
            )    

    )

  )

)
)



server <- function(input, output,session) {

  output$County_tbl<-renderTable({
    head(mtcars)
  })

  output$States_List<-renderUI({
    list_data<-unique(names(mtcars))
    selectInput("cars","Select Car",choices = list_data)
  })

  output$County_Map<-renderPlotly({
    plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })

  output$County_Chart<-renderPlotly({
    Animals <- c("giraffes", "orangutans", "monkeys")
    SF_Zoo <- c(20, 14, 23)
    LA_Zoo <- c(12, 18, 29)
    data <- data.frame(Animals, SF_Zoo, LA_Zoo)

  plot_ly(data, x = ~Animals, y = ~SF_Zoo, type = 'bar', name = 'SF Zoo') %>%
      add_trace(y = ~LA_Zoo, name = 'LA Zoo') %>%
      layout(yaxis = list(title = 'Count'), barmode = 'group')

  })


}  
shinyApp(ui = ui, server = server)

Answer 2

This is because the map and bar chart are set to be in the row below the table, so it makes sense for them to come below the table.

You want to nest your columns, so the map and chart are in the same row as the table.

I'm not sure if the code below will be exactly right - if you provide a reproducible example I would be happy to check how to apply this. But hopefully you see the idea.

fluidRow(
# This column is the total width of the app
  column(width = 12,
         fluidRow(
# This column is half the width of the app and contains the table
           column(width = 6,
                  tableOutput("County_tbl")),
# This column is half the width of the app and contains everything else
           column(width = 6,
# This row contains the dropdown box and slider (each set to half width)
                  fluidRow(
                    column(width = 6, 
                           uiOutput("States_List")),
                    column(width = 6,
                           sliderInput("slider", "Threshold:", 0, 100, post = " %", 50))), 
# This row contains the outputs
                  fluidRow(
                    plotlyOutput("County_Map"), 
                    plotlyOutput("County_Chart")
                  )
           )
         )
  )
)