How to set the sizes and specific layouts in shiny

Question

I am trying to make the following layout in shiny:

This is what I achieved so far by the help of this answer :

My ui.R:

library(shiny)
library(ggplot2)
shinyUI(fluidPage(  
# fluidRow(
# title = "My title",
# column(6,plotOutput('plot1', height="200px"))
# #plotOutput('plot1'),
# #plotOutput('plot2'),
# #plotOutput('plot3')
# ),
fluidRow(
  column(6,div(style = "height:200px;background-color: gray;", "Topleft")),
  column(6,div(style = "height:400px;background-color: gray;", "right"))),
fluidRow(
  column(6,div(style = "height:100px;background-color: gray;", "Bottomleft"))
  ),
hr(),  
fluidRow(
  column(7,
       h4("Control Panel"),
       fileInput('file', 'Select an CSV file to read',
                 accept=c('text/csv','text/comma-separated-     values,text/plain','.csv')),
        br(),          
       sliderInput('sampleSize', 'Sample Size', 
                   min=1, max=100, value=min(1, 100), 
                   step=500, round=0),          
       br(),           
       actionButton("readButton", "Read Data!")
    )
    )
  ))

My server.R:

function(input, output) {




}

I don't know how to plug int he plotOutput into the boxes? How can I control the sizes of the box to look like the layout given above?

Answer 1

Don't make things too complicated, just work with rows, columns and the height attribute of plots:

library(shiny)

ui <- shinyUI(fluidPage(fluidRow(
  column(
    width = 3,
    plotOutput('plot1', height = 200),
    plotOutput('plot2', height = 200)
  ),
  column(width = 8, plotOutput('plot3', height = 400))
),
hr(),
wellPanel(fluidRow(
  column(
    width = 11,
    align = "center",
    h3("Control Panel"),
    column(width = 3, fileInput('file','Select an CSV file to read', accept = c('text/csv', 'text/comma-separated-values,text/plain', '.csv'))),
    column(width = 3, offset = 1, sliderInput('sampleSize','Sample Size', min = 1, max = 100, value = min(1, 100), step = 500,round = 0)),
    column(width = 1, offset = 1, actionButton("readButton", "Read Data!"))
  )
))))


server <- function(input, output) {
  output$plot1 <- renderPlot({
    plot(mtcars$mpg, mtcars$cyl)
  })
  output$plot2 <- renderPlot({
    plot(mtcars$mpg, mtcars$carb)
  })
  output$plot3 <- renderPlot({
    plot(mtcars$mpg, mtcars$disp)
  })
}

shinyApp(ui, server)