...I am trying to resize my ggplots but their height's value do not change using height = as.numeric(input$dimension[1]) in renderPlot as observer.
I would like to display in two fluid rows (1/2 screen's height each) 3 plots (Box2, Box3, Box4) in the third height's part of the first row, and Box5 at 100% of the height of the second fluidrow.
My body's screen should be look like this (without scrolling):
library(ggplot2)
library(shiny)
library(shinyjs)
library(shinydashboard)
bar <- ggplot(data=iris, aes(x=Species)) + geom_bar()
ui <- shinyUI(
dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(),
body = dashboardBody(
tags$head(tags$script(
'var dimension = [0, 0];
$(document).on("shiny:connected", function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});
$(window).resize(function(e) {
dimension[0] = window.innerWidth;
dimension[1] = window.innerHeight;
Shiny.onInputChange("dimension", dimension);
});'
)),
fluidRow(
column(
width = 6,
fluidRow(
box("Box1", width = 12, background = "aqua")
)
),
column(
width = 6,
fluidRow(
box(width = 12, height = "auto", plotOutput("Box2", width = "auto", height = "auto"))
),
fluidRow(
box(width = 12, plotOutput("Box3", width = "auto", height = "auto"))
),
fluidRow(
box(width = 12, plotOutput("Box4", width = "auto", height = "auto"))
)
)
),
fluidRow(
column(
width = 12,
fluidRow(
box(width = 12, plotOutput("Box5", width = "auto", height = "auto"))
)
)
)
)
)
)
server <- shinyServer(function(input, output){
observe(
output$Box2 <- renderPlot(
bar,
height = as.numeric(input$dimension[1]) * 1/ 2 * 1 / 3
)
)
observe(
output$Box3 <- renderPlot(
bar,
height = as.numeric(input$dimension[1]) * 1/ 2 * 1 / 3
)
)
observe(
output$Box4 <- renderPlot(
bar,
height = as.numeric(input$dimension[1]) * 1/ 2 * 1 / 3
)
)
observe(
output$Box5 <- renderPlot(
bar,
height = as.numeric(input$dimension[1]) * 1/ 2 * 1
)
)
})
shinyApp(ui=ui,server=server)