How to set the sizes and specific layouts in shiny - html

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)