R Flexdashboard multiple plots on single tab

Question

I'm trying to put multiple dygraph plots on a single tab of a flexdashboard. I've tried a bunch of different options from here and from here

My RMD file looks like this:

    ---
    title: "Project Dashboard"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: scroll
    ---
        # Intro {.sidebar}

        # Page 1

        ## Column 1 {.tabset .tabset-fade data-width=850}

        ### Site 1

    ```{r  Data, echo=FALSE, fig.height=2}

        s <- dygraph(as.xts(df,order.by=df$DateTime), group = "NC") %>% 
          dyOptions(drawPoints = TRUE, pointSize = 1) %>%
          dyAxis("y", label = "Salinity (PSU)", valueRange = c(16, 30)) %>%
          dyRangeSelector(height = 20) %>% 
          dyLegend(width = 400)

        t <- dygraph(as.xts(df,order.by=df$DateTime), group = "NC") %>% 
          dyOptions(drawPoints = TRUE, pointSize = 1) %>%
          dyAxis("y", label = "Temperature (°C)", valueRange = c(0, 30)) %>%
          dyRangeSelector(height = 20) %>% 
          dyLegend(show = "follow", width = 400)

        dy_graph <- list(s,t)
        pt <- htmltools::browsable(htmltools::tagList(dy_graph))
        pt

```

I've tried a variety of other combinations but it either just plots the first plot, puts the two plots on top of each other, or squishes them together into a tiny space. I even tried using a 4th-level markdown header (####), but that doesn't seem to do anything either.

Any thoughts?

That looks like an R file, not an RMarkdown file, which should have code chunks. — alistaire, Jul 02 '18 at 00:32
So is this just not possible? I've been tantalizingly close but no luck — DarwinsBeard, Jul 04 '18 at 00:37
You can put multiple code chunks within the same h3 block, though controlling the size and arrangement is a little tricky, as it's all subject to the flexbox layout. The [layout page](https://rmarkdown.rstudio.com/flexdashboard/layouts.html) covers the basic possibilities short of hijinks. — alistaire, Jul 04 '18 at 02:57
Thanks alistaire, I looked through the layout page but I don't think it covers what I'm trying to do so I think the "hijinks" method is what I need. What's strange is that I can get the two plots to output together in the rmd output using htmltools, browsable, taglist, but for some reason when it's knit to html it doesn't work as expected. — DarwinsBeard, Jul 04 '18 at 16:47

score 2 · Answer 1 · answered Jun 03 '20 at 21:42

Here's how you can put multiple figures in a tabset using splitLayout. I haven't figured out how to stack yet, like 2x2 figures.

---
title: "Project Dashboard"
runtime: shiny
output: 
flexdashboard::flex_dashboard:
  orientation: columns
  vertical_layout: scroll
---

Page with Tabset {.tabset .tabset-fade}
-------------------------------------

### Two Plots on one Tab

```{r}
library(shiny)
library(flexdashboard)
library(dygraphs)

temperature <- ts(frequency = 12, start = c(1980, 1),
       data = c(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 
       25.2, 26.5, 23.3, 18.3, 13.9, 9.6))
rainfall <- ts(frequency = 12, start = c(1980, 1),
       data = c(49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 
       135.6, 148.5, 216.4, 194.1, 95.6, 54.4))

output$p1 <- renderDygraph( dygraph(temperature))
output$p2 <- renderDygraph( dygraph(rainfall))
```

```{r}
splitLayout(cellWidths = c("50%"), dygraphOutput("p1"), dygraphOutput("p2"))
```

### Another Tab

Hello

Producing...

score 1 · Answer 2 · answered Dec 29 '19 at 16:58

Don't miss the section '13.2.3 CSS flexbox' here (valid beyond plotly).

library(htmltools)
p <- plot_ly(x = rnorm(100))
# NOTE: you don't need browsable() in rmarkdown, 
# but you do at the R prompt 
browsable(div(
  style = "display: flex; flex-wrap: wrap; justify-content: center",
  div(p, style = "width: 40%; border: solid;"),
  div(p, style = "width: 40%; border: solid;"),
  div(p, style = "width: 100%; border: solid;")
))

score 0 · Answer 3 · answered Oct 01 '18 at 10:10

Not sure about how to do it within the dygraph package, but if you revert to ggplot you can use grid.arrange from the gridExtra package to place multiple plots within one "page".

See https://cran.r-project.org/web/packages/egg/vignettes/Ecosystem.html which contains this example:

require(ggplot)
require(gridExtra)
p1 <- qplot(mpg, wt, data = mtcars, colour = cyl)
p2 <- qplot(mpg, data = mtcars) + ggtitle("title")
grid.arrange(p1, p2, nrow = 1)

R Flexdashboard multiple plots on single tab

3 Answers3