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)
)
```
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
)
})
```
I currently have my dashboard which looks like:
What I am trying to do is under the Data tab have additional tabs. For example I want to combine the Table Population tab with the Graphic iris tab so that the table and graphic are on the same page. Then in a new tab have the Another tab-pag (as it currently is).
How can I merge the two tabs to have them on the same page?
I would like this joined tab to look like the Analysis tab:
Dashboard:
---
title: "Analysis"
output:
flexdashboard::flex_dashboard:
#css: "custom_style.css"
theme:
base_font:
google: Prompt
code_font:
google: JetBrains Mono
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(shinyWidgets)
library(shinyjs)
library(gt)
library(gtExtras)
library(plotly)
```
MySidebar {.sidebar}
==============================
```{r}
useShinyjs(rmd = TRUE)
shinyWidgets::pickerInput(
inputId = "select_species",
label = h4("Species"),
choices = unique(iris$Species),
selected = unique(iris$Species[1]),
multiple = TRUE,
options = list(
`actions-box`= TRUE,
size = 10,
`selected-text-format` = "count > 1"
)
)
```
Introduction {data-vertical_layout=scroll}
==============================
Column {data-width=650 .main .tabset}
-----------------------------------------------------------------------
Here is some introduction text
Data {data-vertical_layout=scroll}
==============================
IRIS Species {.tabset .tabset-fade}
-------------------------------------
### Table Population
```{r}
output$irisTable = render_gt({
iris %>%
gt() %>%
gt_add_divider(columns = "Provincias", weight = px(3), color = "lightgrey", include_labels = FALSE)
})
div(style='height:800px; overflow-y: scroll',
gt_output("populationTable")
)
```
### Graphic iris
```{r}
renderPlotly({
ggplotly(
iris %>%
ggplot(aes(x = Species, y = Petal.Length)) +
geom_bar() +
theme_bw()
)
})
```
### Another tab-page
Analysis {data-vertical_layout=scroll}
==============================
Column
-------------------------------------
### Tab 1
some text
### Tab 2
some more text
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 have to make Actionbutton gives me 3 outputs:
All outputs will be in dots on ggplot chart.
when I click one time the dot will be on (30,58) point on my ggplot chart.
when I click two times the dot will be on (40,68) point on my ggplot chart.
when I click three times the dot will be on (50,78) point on my ggplot chart.
Bellow is my code bellow:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(shinydashboard)
library(ggplot2)
library(mgcv)
dataset <- diamonds
```
Column {data-width=150}
-----------------------------------------------------------------------
### Chart A
```{r}
actionButton("action", "Action")
```
Column {data-width=350}
-----------------------------------------------------------------------
### Chart B
```{r}
ggplot() +
geom_point(data = tibble(x = c(30,40,50),y = c(58,68,78)), aes(x =x, y = y))
```
### Chart C
```{r}
reactive({
input$action
})
```
As you can see Im a begginer. I just need to understand how to link the idea of n-clicks and n-outputs in flexdashboard/shiny.
Any help?
Maybe not the answer you are looking for, but we can use flexdashboard similarly to shiny like this:
Note: I changed the color of the points instead of showing them individually because if not the point will look like it doesn't move.
---
title: "Press Three Times The Button"
output: flexdashboard::flex_dashboard
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(shinydashboard)
library(tidyverse)
library(mgcv)
```
```{r}
shinyApp(
ui = fillPage(
fillCol(
flex = c(NA, 1),
inputPanel(
actionButton("action", "Action")
),
plotOutput("plot")
)
),
server = function(input, output) {
data <- tibble(x = c(30, 40, 50), y = c(58, 68, 78))
counter <- reactiveVal(0)
observeEvent(input$action, {
if (counter() < 3) {
counter(counter() + 1)
} else {
counter(1)
}
})
rv_tibble <- reactive({
slice(data, counter())
})
output$plot <- renderPlot({
ggplot() +
geom_point(data = data, aes(x = x, y = y), size = 5) +
geom_point(data = rv_tibble(), aes(x = x, y = y), color = "red", size = 10)
})
},
options = list(height = 600)
)
```
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")
```