I want to plot the google map just next to the sliderBar, but when I try this code, I get a huge blank space between:
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
actionButton("bb","bb"),
sliderInput("aa","aa",value=1,min=0,max=10),
sliderInput("aa1","aa1",value=1,min=0,max=10),
sliderInput("aa2","aa2",value=1,min=0,max=10),
sliderInput("aa3","aa3",value=1,min=0,max=10)
)
,
mainPanel(
plotOutput("rys")
)
)
)
server <- function (input, output){
output$rys <- renderPlot({qmap('Europe',zoom=4)})
}
shinyApp(ui = ui, server = server)
how to remove this blank space?
The default appearance for plotOutput is width="100%" and height="400"
If you are on a desktop, 100% is about 1200 px and since the map is square, it is limited by the smallest dimension, height=400 to 400x400
It is centered so you have a whitespace of about 400px
To fix this issue, you can either use a bigger height, for example height="1000" or set both height and width :
plotOutput("rys", width = "400", height="400")
Related
library(shiny)
ui <- fluidPage(
titlePanel("Hello"),
sidebarLayout(
sidebarPanel("Hello SideBar"),
mainPanel("Hello MainPanel")
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Just by eyeballing I can tell right now my sidebar panel takes up about 33% of the width of the screen. Any idea how I can reduce the width of the sidebar so that the main Panel is larger?
sidebarPanel has a width argument
width: The width of the sidebar. For fluid layouts this is out of 12
total units; for fixed layouts it is out of whatever the width of the
sidebar's parent column is.
The default width is 4, which confirms your eyeballing estimate that 4/12 is one third. So to make it e.g 1/2 the current width you would do:
ui <- fluidPage(
titlePanel("Hello"),
sidebarLayout(
sidebarPanel("Hello SideBar", width=2),
mainPanel("Hello MainPanel")
)
)
The shinymaterial package includes a function called material_parallax() which allows for a pretty parallax effect on images while scrolling. The only parameter of the function is image_source. I'd like to change the height of this parallax box in my app.
Is it possible (using custom css or otherwise) to change the height of material_parallax() so it takes up less vertical space?
Example:
library(shiny)
library(shinymaterial)
ui <- material_page(include_nav_bar = FALSE,
#I'd like this parallax to be shorter
material_parallax(
image_source = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Freudenberg_sg_Switzerland.jpg/1920px-Freudenberg_sg_Switzerland.jpg"),
material_card(
h1("This is just to add vertical space",
plotOutput("plot"))
)
)
server <- function(input,output){
output$plot <- renderPlot(height = 1000,
pairs(iris))
}
shinyApp(ui,server)
You can use this css:
ui <- material_page(
tags$head(tags$style(type="text/css",
".parallax-container{height:150px} .parallax img{height:50%}")),
include_nav_bar = FALSE,
#I'd like this parallax to be shorter
material_parallax(
image_source = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Freudenberg_sg_Switzerland.jpg/1920px-Freudenberg_sg_Switzerland.jpg"),
material_card(
h1("This is just to add vertical space",
plotOutput("plot"))
)
)
I have a plot which is set to 100% width (default) in the main panel of a two-panel page in R Shiny. The sidebar is hideable through a toggle action button.
When the sidebar is visible (default), the plot fills the width of the main panel. When the sidebar is hidden, I want the plot to expand to fill 100% of the space now available, i.e. the whole browser window. But this does not happen! It keeps the same size.
library(shiny)
library(shinyBS)
UI <- fluidPage(
bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
sidebarLayout(
conditionalPanel(condition = "input.showpanel == true",
sidebarPanel("This is my sidebar.")
),
mainPanel(plotOutput("plot", width = "100%"))
)
)
SERVER <- function(input, output) {
output$plot <- renderPlot({
plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
})
}
runApp(shinyApp(UI,SERVER))
Attempted so far:
Defining the plot object from within the UI file, as above.
Defining the plot object from within the server file, as a renderUI object.
Set CSS tag in the page as per tags$head(tags$style("#myplot{height:100vh !important;}")) from this question, Scaling shiny plots to window height.
Possible work-arounds:
Make the width of the plot dynamic and depending on the state of the toggle button. Then I can make the plot e.g. 140% width when the sidebar is hidden. This does not generalise well, and loses the point of using the adaptability of fluidPage.
(fluidPage changes the layout dependent on the browser window size. For example, if you make your browser window about the size of a mobile phone, it will place the sidebar above the main panel.)
#konvas answer is really good and probably the way you wan't to do this but if you want to use the sidebarLayout (and for the sake of giving another answer) you can use jQuery to toggle the bootstrap columns like:
library(shiny)
ui <- fluidPage(
tags$head(
tags$script(
HTML("
$(document).ready(function(){
// Mark columns we want to toggle
$('body').find('div [class=col-sm-4]').addClass('sidebarPanel');
$('body').find('div [class=col-sm-8]').addClass('mainPanel');
})
Shiny.addCustomMessageHandler ('resize',function (message) {
$('.sidebarPanel').toggle();
$('.mainPanel').toggleClass('col-sm-8 col-sm-12');
$(window).trigger('resize')
});
")
)
),
actionButton("showpanel", "Show/hide sidebar"),
sidebarLayout(
sidebarPanel("This is my sidebar."),
mainPanel(plotOutput("plot", width = "100%"))
)
)
server <- function(input, output, session) {
observeEvent(input$showpanel,{
session$sendCustomMessage(type = 'resize', message = 1)
})
output$plot <- renderPlot({
plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
})
}
runApp(shinyApp(ui,server))
The same methodology would apply if you use columns in a fluidRow or something similar.
One way to do this would be to use a reactive layout (there are many questions on this eg Switch between layouts reactively with shiny). In your case that would be something like
library(shiny)
library(shinyBS)
UI <- shinyUI(
fluidPage(
bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
uiOutput('ui')
)
)
SERVER <- function(input, output) {
output$ui <- renderUI({
if (input$showpanel) {
sidebarLayout(
sidebarPanel("This is my sidebar."),
mainPanel(plotOutput('plot'))
)
} else {
plotOutput('plot')
}
})
output$plot <- renderPlot({
plot(1:10, main = "The width of this plot adjusts\nto window resizes and to\nshow/hide sidepanel!")
})
}
runApp(shinyApp(UI,SERVER))
I want to scale a shiny plot to the height of the window. This related SO question only uses absolute height specifications in pixels, when a height = 100% would be preferable. I note in the documentation that absolutePanel can achieve this with its top, bottom, left, right arguments, but then you lose the side panel, and in any case the plot (while scaling to width) seems to ignore available height.
I'm guessing this relates to the html quirk that means you need to get the height with javascript innerHeight variable. But I'm unclear how to implement a solution in shiny to get ui.R to utilise this. Grateful for any pointers.
A basic app model for development:
ui.R
library(shiny)
shinyServer(
function(input, output) {
output$myplot <- renderPlot({
hist(rnorm(1000))
})
}
)
server.R
library(shiny)
pageWithSidebar(
headerPanel("window height check"),
sidebarPanel(),
mainPanel(
plotOutput("myplot")
)
)
Use CSS3. Declare your height in viewport units http://caniuse.com/#feat=viewport-units .
You should be able to declare them using the height argument in plotOutput however shiny::validateCssUnit doesnt recognise them so you can instead declare them in a style header:
library(shiny)
runApp(
list(server= function(input, output) {
output$myplot <- renderPlot({
hist(rnorm(1000))
})
}
, ui = pageWithSidebar(
headerPanel("window height check"),
sidebarPanel(
tags$head(tags$style("#myplot{height:100vh !important;}"))
),
mainPanel(
plotOutput("myplot")
)
)
)
)
This wont work in the shiny browser but should work correctly in a main browser.
The example below plots 4 groups in 4 panes together. But the problem is that they seem to be residing in a single grid. Is it possible to control the size of the charts in shiny output? (ie so that there is no scroll bar on the right when the app is run) I tried to control the height and width, but that only seems to control the image within the grid itself... any ideas?
thanks
shinyUI(pageWithSidebar(
headerPanel("Example"),
sidebarPanel(
),
mainPanel(
tabsetPanel(tabPanel("Main",plotOutput("temp"))
)#tabsetPanel
)#mainPane;
))
shinyServer(function(input, output) {
output$temp <-renderPlot({
par(mfrow=c(2,2))
plot(1:10)
plot(rnorm(10))
plot(rnorm(10))
plot(rnorm(10))
}, height = 1000, width = 1000)
})
plotOutput has height and width parameters as well; the width defaults to "100%" (meaning 100% of the available width in its container) and the height defaults to "400px" (400 pixels). Try experimenting with these values, changing them to either "auto" or "1000px".
renderPlot's height and width parameters control the size of the generated image file in pixels, but doesn't directly affect the rendered size in the web page. Their default values are both "auto", which means, detect and use the width/height of the corresponding plotOutput. So once you've set the width and height on plotOutput, you generally don't need the width and height to be set on renderPlot at all.
shinyUI(pageWithSidebar(
headerPanel("Example"),
sidebarPanel(
),
mainPanel(
tabsetPanel(tabPanel("Main",plotOutput("temp", height = 1000, width = 1000))
)#tabsetPanel
)#mainPane;
))
shinyServer(function(input, output) {
output$temp <-renderPlot({
par(mfrow=c(2,2))
plot(1:10)
plot(rnorm(10))
plot(rnorm(10))
plot(rnorm(10))
})
})