I have the following mockup flexdashboard:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {.sidebar}
-----------------------------------------------------------------------
```{r}
selectInput("input_brand", "Select brand:",
c("Wendy's" = "Wendys",
"Burger King" = "BurgerKing",
"Big Kahuna" = "BigKahuna"))
```
Column
-----------------------------------------------------------------------
### Chart A
```{r}
plot(iris$Sepal.Length,iris$Sepal.Width)
```
I just want to insert some breaks above "Select Brand" input. You can see in the image that the text is close to the "Untitled" bar:
You can set breaks with the HTML function:
First with br
Column {.sidebar}
-----------------------------------------------------------------------
```{r}
HTML("<br><br>") #each <br> is one row
selectInput("input_brand", "Select brand:",
c("Wendy's" = "Wendys",
"Burger King" = "BurgerKing",
"Big Kahuna" = "BigKahuna"))
```
Second apprach with margin
Column {.sidebar}
-----------------------------------------------------------------------
```{r}
div(style = "margin-top: 500px;",
selectInput("input_brand", "Select brand:",
c("Wendy's" = "Wendys",
"Burger King" = "BurgerKing",
"Big Kahuna" = "BigKahuna"))
)
```
Related
I have a sidebar with multiple shiny selectInput (country and year). This sidebar is the same for all pages (Summary and World Map) of my flexdashboard. How can I disable the country input on the Summary page ?
I've tried using shinyjs::useShinyjs() but I don't know how to use it in a flexdashboard framework.
---
title: "Title"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: yeti
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(shinyjs)
shinyjs::useShinyjs()
``` //
Sidebar {.sidebar}
=====================================
```{r}
selectInput("countryInput", "Select a country", choices = sort(c(data_long$cname)), selected = 1)
selectInput("yearInput", "Select a year", choices = c(data_long$year), selected = 10)
shinyjs::disable("countryInput")
``` //
Summary
=====================================
Row
-----------------------------------------------------------------------
### Graph 1
```{r}
omitted
``` //
### Graph 2
```{r}
omitted
``` //
Row
-----------------------------------------------------------------------
### Data
```{r}
omitted
``` //
World map
=====================================
Row
-----------------------------------------------------------------------
### map
```{r}
omitted
``` //
EDIT: spelling
I am creating a reactive dashboard using flexdashboard with shiny. I would like the first row below the header to contain two separate selectInput() menus. I am keeping the height of the rows small (50), because there will be several more graphs underneath and I need the space. However, when the dashboard is rendered, clicking on the input menu to select another option results in the dropdown "disappearing" behind the row (not overflowing it). This makes it difficult to select items below the second or third element. How do I make the contents overflow? Here is a reproducible code + screenshot:
---
title: "Test Dashboard"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
```
Row {data-height=50}
-----------------------------------------------------------------------
### Window 1
```{r}
selectInput("project", label = NULL, choices = c("A","B","C","D"))
```
### Window 2
```{r}
selectInput("data", label = NULL, choices = c("1","2","3","4","5", "6"))
```
Row
-----------------------------------------------------------------------
### Chart B
```{r}
renderPlot({
plot(rnorm(1000), type = "l", main = paste("Project:",input$project, " Data:", input$data))
})
```
Attached an image of how it looks.
Flexdasboard image:
Thanks much,
Jorge
You said there will be more graphs in the future, but I think you can render the individual plots 'underneath' Flexdashboard, to save space. I changed, the rows to columns, let me know.
---
title: "Test Dashboard"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
```
Column {data-width=600}
-----------------------------------------------------------------------
### Window 1
```{r}
selectInput("project", label = NULL, choices = c("A","B","C","D"))
```
### Window 2
```{r}
selectInput("data", label = NULL, choices = c("1","2","3","4","5", "6"))
```
Column {data-width=400}
-----------------------------------------------------------------------
### Chart B
```{r}
renderPlot({
plot(rnorm(1000), type = "l", main = paste("Project:",input$project, " Data:", input$data))
})
```
I am trying to shift the filtering to the right hand side but not able to. Can anyone please help. please refer the expected output. Is it possible to achieve this?
reprex below
title: "Untitled"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
selectInput("Tic","Ticker",choices = c("","ALL",as.character(iris$Species)),selected = NULL)
dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(),format = "yyyy-mm-dd")
DT::DTOutput('SUMMARY_GENERAL_table')
output$SUMMARY_GENERAL_table <- DT::renderDT( datatable(iris) )
```
Expect Output :
You'll need to add some css. Please check the following:
---
title: "Untitled"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
div(style="display:inline-block; vertical-align:top; float:right;",
fluidRow(
column(width = 6, selectInput("Tic","Ticker",choices = c("", "ALL", as.character(iris$Species)), selected = NULL)),
column(width = 6, dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(), format = "yyyy-mm-dd"))
))
DT::DTOutput('SUMMARY_GENERAL_table')
output$SUMMARY_GENERAL_table <- DT::renderDT( datatable(iris) )
```
When there is a text above a datatable object, the table is truncated and the pagination is no longer visible.
Is it possible to size the datatable to that it fits in one flexdashboard container?
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r, results='asis'}
cat("This is a text\n\nThis is a text")
```
```{r}
mtcars %>% datatable(options = list(dom = 'tp'))
```
You have a few options. You could use vertical_layout: scroll. This will allow the pagination to work while keeping the text in the same container as the table.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: scroll
---
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r, results='asis'}
cat("This is a text\n\nThis is a text")
```
```{r}
mtcars %>% datatable(options = list(dom = 'tp'))
```
Alternatively you could use separate containers for the text and the table. You would probably want to set the height of the containers with {data-height} if you do this.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Text A {data-height=50}
```{r, results='asis'}
cat("This is a text\n\nThis is a text")
```
### Chart A
```{r}
mtcars %>% datatable(options = list(dom = 'tp'))
```
Im trying to figure out how to combine a grid layout, rowwise tabset and the ability to scroll in markdown / flexdashboard.
What I would like to achieve is that Tab 3 should be to the right of Tab 1 & 2 with the ability to scroll down to Tab 4-6 (where Tab 6 should be to the right of 4/5).
Something like this:
Is this possible?
---
title: "Test"
output:
flexdashboard::flex_dashboard:
orientation: row
vertical_layout: scroll
---
```{r setup, include=FALSE}
library(flexdashboard)
```
A {data-orientation=rows}
===================================================
Row {data-width=500 data-height=400 .tabset}
-----------------------------------------------------------------------
### Tab 1 {data-height=400 data-width=500}
```{r}
plot(rnorm(10))
```
### Tab 2 {data-height=400 data-width=500}
```{r}
plot(rnorm(10))
```
Column
-----------------------------------------------------------------------
### Tab 3 {data-height=400 data-width=300}
Some text
Row {data-width=500 data-height=400 .tabset}
-----------------------------------------------------------------------
### Tab 4 {data-height=400 data-width=500}
```{r}
plot(rnorm(10))
```
### Tab 5 {data-height=400 data-width=500}
```{r}
plot(rnorm(10))
```
Column
-----------------------------------------------------------------------
### Tab 6 {data-height=400 data-width=300}
Some text
Here is a possible solution to your problem
This is the code
---
title: "Test"
output: flexdashboard::flex_dashboard
---
```{r setup, include=FALSE}
library(flexdashboard)
require(shinydashboard)
require(shiny)
require(plotly)
```
A {data-orientation=rows}
===================================================
Row
-----------------------------------------------------------------------
```{r}
p1 <- plot_ly(x = 1:10, y = rnorm(10))
tabBox(width=5,tabPanel("Tab1", p1), tabPanel("Tab2"), height = "450px")
```
```{r}
tabBox(width=7, tabPanel("Tab3","Some text"), height = "450px")
```
Row
-----------------------------------------------------------------------
```{r}
p2 <- plot_ly(x = 1:10, y = rnorm(10))
tabBox(width=5, tabPanel("Tab4",p2), tabPanel("Tab5"), height = "450px")
```
```{r}
tabBox(width=7, id = "tabset4", tabPanel("Tab6","Some text"), height = "450px")
```