I’m having a very specific problem with a plotly heatmap object inserted in a two tabbed flexdashboard rmarkdown. The MRE below, when rendered, displays an uncaught axis resizing javascript error. The error causes the datatable and heatmap to not render. However, if the heatmap is moved to the same tab both will render without a problem. The craziest part is that a hard refresh of the html document (ctrl+f5 in browser) with the second tab open causes the javascript error to disappear and everything renders just fine. I am having a very difficult time isolating this issue to the plotly R API, or the R package htmlwidgets. Any ideas?
---
title: "`r paste0('Test')`"
date: "`r Sys.Date()`"
output:
flexdashboard::flex_dashboard:
vertical_layout: scroll
orientation: rows
self_contained: false
---
```{r setup, include=FALSE}
library(flexdashboard)
library(reshape2)
library(dplyr)
library(ggplot2)
library(plotly)
```
Tab1
===================================================
Row
-----------------------------------------------------------------------
### A scatter
```{r fig1}
df = data.frame(x = 1:5, y = 1:5, z = 1:5)
plot_ly(df, x = ~x, y = ~y, type = "scatter")
```
Row
-----------------------------------------------------------------------
### A table
```{r table1}
DT::datatable(df,
filter="top",extensions = 'Buttons',
options = list(
dom = 'Bfrtip',
buttons = c('copy', 'csv', 'excel'),
pagelength=50,
autoWidth=T,
deferRender = T
)
)
```
Tab2
===================================================
Row
-----------------------------------------------------------------------
### A heatmap
```{r fig2}
plot_ly(df, x = ~x, y = ~y, z = ~z, type = "heatmap")
```
Related
I am trying to create a simple Shiny app. My goal is to select one of the charts from the drop-down menu and visualization of the selected chart. Below you will see my script.
---
title: "Test App"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
# Libraries ----
# App
library(flexdashboard)
library(shiny)
library(shinyjs)
library(shinyWidgets)
# Core
library(tidyverse)
library(tidyquant)
# Visualizations
library(ggplot2)
# Data
data=mtcars
data$cyl <- as.factor(data$cyl)
```
Column {.sidebar}
-----------------------------------------------------------------------
```{r}
useShinyjs(rmd = TRUE)
selectInput("clusterNum", label = h4("Charts"),
choices = list("Chart1" = "Chart1", "Chart2" = "Chart2"),
selected = "Chart1")
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart
```{r}
Chart1<-qplot(x = data$wt, y = data$mpg)
Chart2<-qplot(data$cyl, geom = "bar")
num <- reactive(input$clusterNum)
renderPlot(num())
```
When I run this script, I can change the names of the Charts (e.g., Chart1 or Chart2) from the drop-down menu, but I can't see a visualization of the selected chart. So can anybody help me how to solve this problem and to have a visualization as in the pic below?
You could use switch or an ìf-else inside your renderPlot to display the chosen chart.
Note: qplot was depcrecated in ggplot2 3.4.0 and will probably removed in the future. To take account of this I switched to ggplot().
---
title: "Test App"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(tidyverse)
# Data
data <- mtcars
data$cyl <- as.factor(data$cyl)
```
Column {.sidebar}
-----------------------------------------------------------------------
```{r}
selectInput("clusterNum",
label = h4("Charts"),
choices = list("Chart1" = "Chart1", "Chart2" = "Chart2"),
selected = "Chart1"
)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart
```{r}
Chart1 <- ggplot(data, aes(x = wt, y = mpg)) +
geom_point()
Chart2 <- ggplot(data, aes(cyl)) +
geom_bar()
renderPlot({
switch(input$clusterNum,
"Chart1" = Chart1,
"Chart2" = Chart2
)
})
```
UPDATE: Edited code to depict tabs already exist
I have a Quarto qmd file with an R plotly figure rendered as html. I want to provide an option (button/link) for the user to change the view from plot to the data table, and vice versa. What is the best way to go about this?
The code below shows the plot and table side by side. I would like to show either the plot or the table with the option to switch view to the other.
---
title: "MTCars"
format:
html:
code-fold: true
---
::: panel-tabset
## Tab 1
```{r, echo=FALSE, out.height="30%"}
#| warning: false
#| layout-ncol: 2
library(DT)
library(plotly)
plot_ly( mtcars,
x = ~disp,
y = ~wt,
type = 'scatter',
mode = 'lines',
height = 400,
width = 700
)
datatable(mtcars)
```
## Tab 2
:::
You could use a (nested) tabset panel? I.e.
---
title: "MTCars"
format: html
---
::: {.panel-tabset}
## Tab 1
::: {.panel-tabset}
## Plot
```{r, error=FALSE, message=FALSE, echo=FALSE}
library(plotly)
plot_ly(mtcars,
x = ~disp,
y = ~wt,
type = 'scatter',
mode = 'lines',
height = 400,
width = 700
)
```
## Table
```{r, echo=FALSE}
library(DT)
datatable(mtcars)
```
:::
## Tab 2
:::
Output:
See: https://quarto.org/docs/interactive/layout.html#tabset-panel
**Update: Nested version according to comment.
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'm trying to include ploly plots in a tabbed html widget within a flexdashboard document with a storyboard layout. The autosizing of the first plot is fine, but not on any subsequent tab. Here is an MRE,
---
title: "MRE"
output:
flexdashboard::flex_dashboard:
storyboard: true
---
```{r setup, include=FALSE}
library(flexdashboard)
library(plotly)
library(shiny)
```
### Test
```{r}
plot1 = plot_ly(x = 1:5, y = 6:10, type = "scatter")
plot2 = plot_ly(x = 1:5, y = 1:5, type = "scatter")
tabsetPanel(
tabPanel("Employee Monthly", plot1),
tabPanel("Employee Weekly", plot2)
)
```
I'm building an R FlexDashboard in storyboard format. I'd like to display multiple plots on a few of the storyboard pages, including a series of linked plots using crosstalk. However, when I try to display multiple plots on a page or use the bscols() function, the page looks all messed up. Are multiple plots allowed in R FlexDashboard's storyboard format? Here is an example:
---
title: "Error_example"
output:
flexdashboard::flex_dashboard:
storyboard: true
theme: bootstrap
---
###Example: Why can't won't the datatable show up below the plot in this storyboard?
```{r}
library(plotly)
library(DT)
plot1<-plot_ly(data=diamonds,x=~carat,y=~price)
table1<-datatable(diamonds)
plot1
table1
bsCols() Seems to completely override the flexdashboard CSS so I would avoid using that.
A simple solution would be to add some divs into the R chunk. Something like:
---
title: "I think this should work"
output:
flexdashboard::flex_dashboard:
storyboard: true
theme: bootstrap
---
###Example: Using divs to separate outputs
```{r}
library(shiny)
library(plotly)
library(DT)
plot1<-plot_ly(data=diamonds,x=~carat,y=~price)
table1<-datatable(diamonds)
tags$div(
tags$div(
plot1
),
tags$div(
table1
)
)
```
This example combines crosstalk, leaflet and plotly, in a way which allows for a high number of plots. The trick is to use absolutepanels with collapsable buttons. The absolutepanel sits over the leaflet map, which means the map can be full size like in superzip https://shiny.rstudio.com/gallery/superzip-example.html, while the buttons allow plots to appear on an as needs basis. So you can add as many plots and tables as youe like, link them with crosstalk, and still tell your story.
This makes a clean interface where plots are included in a way which the user has greater control over the final display. Another example is here How to combine row and column layout in flexdashboard?, but without crosstalk.
---
title: "Demo"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(rmarkdown)
library(plotly)
library(shiny)
library(DT)
```
```{r}
library(crosstalk)
sd <- SharedData$new(quakes[sample(nrow(quakes), 100),])
```
Map { data-icon="fa-map-o"}
=====================================
Sidebar {.sidebar data-width=220}
--------------------------------
```{r, results='asis'}
filter_slider("mag", "Magnitude", sd, column=~mag, step=0.1, width=200)
```
Column {data-width=400}
--------------------------------
### Planet Earth
```{r}
library(leaflet)
leaflet(sd) %>% addTiles() %>% addMarkers()
```
```{r}
##########################
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
draggable = TRUE, top = 70, left = "auto", right = 20, bottom = "auto",
width = '25%', height = 'auto',
style = "overflow-y:scroll; max-height: 1000px; opacity: 0.9; style = z-index: 400",
h4(strong("Plot Explorer")),
HTML('<button data-toggle="collapse" data-target="#box1" class="btn-block btn-primary">dot plot</button>'),
tags$div(id = 'box1', class="collapse in",
plot_ly(sd, x = ~depth, y = ~mag) %>% layout(height=200)
),
HTML('<button data-toggle="collapse" data-target="#box2" class="btn-block btn-warning">histogram</button>'),
tags$div(id = 'box2', class="collapse",
plot_ly(sd, x = ~depth, y = ~mag, type = "histogram", name = "Histogram") %>% layout(height=200)
),
HTML('<button data-toggle="collapse" data-target="#box3" class="btn-block btn-danger">table</button>'),
tags$div(id = 'box3', class="collapse in",
datatable(sd, extensions="Scroller", style="bootstrap", class="compact", width="100%",height = 300,
options=list(deferRender=TRUE, scrollY=300, scroller=TRUE))
)
)
```