Align four elements on Shiny dashboard

shiny
,
1

Hi, I am struggling with aligning FOUR elements on my dashboard. I still do not see a simple tutorial, which can help me to understand this question.

What do I want? To align four elements properly. To put barchart below filters. Then it will be a perfect alignment.

My ui looks like this

# User interface
ui <- fluidPage(theme = shinytheme("united"),
        titlePanel(HTML("<h1><center><font size=14> Crimes in Washington, DC (2017) </font></center></h1>")),
        # titlePanel("Crimes in Washington, DC (2017)", align = "center"), 
        fluidRow(column(4, align="center", 
                        selectInput("offenceInput", "Type of Offence",
                                    choices = sort(unique(incidents$Offense)),
                                    selected = sort(unique(incidents$Offense)),
                                    multiple = TRUE),
                        selectInput("methodInput", "Method of Offence",
                                    choices = sort(unique(incidents$Method)),
                                    selected = sort(unique(incidents$Method)),
                                    multiple = TRUE),
                        selectInput("shiftInput", "Police Shift",
                                    choices = sort(unique(incidents$Shift)),
                                    selected = sort(unique(incidents$Shift)),
                                    multiple = TRUE),
                        selectInput('background', 'Background',
                                    choices = providers,
                                    multiple = FALSE,
                                    selected = 'Stamen.TonerLite'),
                        dateRangeInput('daterangeInput',
                                         label = 'Date',
                                         start = as.Date('2017-01-01') , end = as.Date('2017-12-31')
                          )
        ),

        column(8,
               leafletOutput(outputId = 'map', height = 600, width = 800),

        column(10, plotOutput("bar"),

        column(12,
                   dataTableOutput('my_table')
        )
        )

)))

5JMWE
5JMWE1190×738 186 KB

2

Could you make it clearer how you'd like all the elements to be arranged? I should be able to help once I have a better idea of what you're looking for.

3

Dear @paul, thanks a lot.
Basically, I want the following. I will obviously make barplot axis x smaller.
I read this but still not sure how to do this

5JMWE
5JMWE1096×557 192 KB

4

OK try something like this. and set the width argument on all the filters, map, chart and table to width = "100%"

ui <- fluidPage(
  
  fluidRow(class = "text-center",
    
    column(width = 6,
           
           column(6, offset = 3,
                  
                  # put all your filters in here
                  
           )
           
    ),
    
    column(width = 6,
           
           # TITLE AND MAP IN HERE
           
    )
    
  ),
  
  fluidRow(
    
    column(width = 6,
           
           # BAR CHART HERE
           
    ),
    
    column(width = 6,
           
           # TABLE HERE
           
    )
    
  )
  
)
1 Like
5

Hi @Oleksiy,

additionally to the solution of @paul. Perhaps this page may help you: https://rstudio.github.io/shinydashboard/structure.html#layouts It's not really a tutorial, but it explains the basic features and handling of fluidRows and columns.

Best regards
Sebastian

6

@SebastianVock, thanks, I saw it, all this stuff is pretty new for me, but I was exactly working on it yesterday!

7

Nope, does not work, I got lost in this multiple ((((()))))) without exact code :frowning:

8

I don't know if I understand what you want but try something like this :

library(shiny)
library(shinythemes)
library(leaflet)
library(DT)

ui <- fluidPage(theme = shinytheme("united"),
                titlePanel(HTML("<h1><center><font size=14> Crimes in Washington, DC (2017) </font></center></h1>")),
                # titlePanel("Crimes in Washington, DC (2017)", align = "center"), 
                fluidRow(
                  column(4, align = "center", 
                                selectInput("offenceInput", "Type of Offence",
                                            choices = c("a","b"),
                                            selected = "",
                                            multiple = F),
                                selectInput("methodInput", "Method of Offence",
                                            choices = c("a","b"),
                                            selected = "",
                                            multiple = F),
                                selectInput("shiftInput", "Police Shift",
                                            choices = c("a","b"),
                                            selected = "",
                                            multiple = F),
                                selectInput('background', 'Background',
                                            choices = c("a","b"),
                                            multiple = FALSE,
                                            selected = ""),
                                dateRangeInput('daterangeInput',
                                               label = 'Date',
                                               start = as.Date('2017-01-01') , end = as.Date('2017-12-31'))
                     ),
                
                column(8, leafletOutput(outputId = 'map', height = 350, width = "100%"))
                ),
                
                fluidRow(
                         column(6, plotOutput("distPlot")),
                         column(6, dataTableOutput('my_table'))
                )
        )

server <- function(input, output) {
   
   output$distPlot <- renderPlot({
      # generate bins based on input$bins from ui.R
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = 10 + 1)
      
      # draw the histogram with the specified number of bins
      hist(x, breaks = 10, col = 'darkgray', border = 'white')
   })
   
   output$map <- renderLeaflet({
       leaflet() %>% setView(18.2373, 38.066, zoom = 4) %>% addTiles()
   })
   
  output$my_table <- renderDataTable({
    datatable(iris)
  }) 
   
}

shinyApp(ui = ui, server = server)
9

@veegpap, thanks, almost there, but a plot does not work

Capture1
Capture11379×745 155 KB

10

Without some code or a reprex, help is impossible.

11

Folks, thanks a ton, I finally fixed it and realized where was mistake.
At least now I have a right alignment and will continue to work with various smaller amendments for barplot, its legent, visualization of plot (ggplot2 is too rough here) etc.
Thanks to everybody for your time!

# User interface
ui <- fluidPage(theme = shinytheme("united"),
            titlePanel(HTML("<h1><center><font size=14> Crimes in Washington, DC (2017) </font></center></h1>")),
            fluidRow(column(4, align="center", 
                            selectInput("offenceInput", "Type of Offence",
                                        choices = sort(unique(incidents$Offense)),
                                        selected = sort(unique(incidents$Offense)),
                                        multiple = TRUE),
                            selectInput("methodInput", "Method of Offence",
                                        choices = sort(unique(incidents$Method)),
                                        selected = sort(unique(incidents$Method)),
                                        multiple = TRUE),
                            selectInput("shiftInput", "Police Shift",
                                        choices = sort(unique(incidents$Shift)),
                                        selected = sort(unique(incidents$Shift)),
                                        multiple = TRUE),
                            selectInput('background', 'Background',
                                        choices = providers,
                                        multiple = FALSE,
                                        selected = 'Stamen.TonerLite'),
                            dateRangeInput('daterangeInput',
                                             label = 'Date',
                                             start = as.Date('2017-01-01') , end = as.Date('2017-12-31')
                              ),
                            br(),
                            plotOutput("bar")
            ),
          
            column(8,
                   leafletOutput(outputId = 'map', height = 600, width = 800),
          
                       dataTableOutput('my_table')
            
            )
            
))

Capture1
Capture11244×880 208 KB