CODEWITHSUNDEEP
rr-markdownflexdashboard
DarwinsBeard
DarwinsBeard

Reputation: 563

R Flexdashboard multiple plots on single tab

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?

Upvotes: 5

Views: 5624

Answers (3)

LeslieKish
LeslieKish

Reputation: 434

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...

enter image description here

Upvotes: 3

Pablo Bernabeu
Pablo Bernabeu

Reputation: 262

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;")
))

Upvotes: 1

glenn
glenn

Reputation: 289

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)

Upvotes: 0

Related Questions