Search code examples
rflexdashboard

Can you arrange a Flexdashboard by rows and columns?


I'm trying to create a large dashboard for a 65" display. I have data that consists of varying (1-4) parameters per group with 1 main parameter. I would like to display these groups with one main graph and the parameters graphed individually below it:

[MAIN------GRAPH1]  [MAIN------GRAPH4]
[PAR1][PAR2][PAR3]  [PAR1][PAR2][PAR3]

[MAIN------GRAPH2]  [MAIN------GRAPH5]
[PAR---1][PAR---2]  [PAR1][PAR2][PAR3]

[MAIN------GRAPH3]  [MAIN------GRAPH6]
[PAR1][PAR2][PAR3]  [PAR---1][PAR---2]

I have tried arranging the flexdashboard by rows but the result isn't working as expected.

Here's what I have so far:

---
title: "Dashboard"
output: 
flexdashboard::flex_dashboard:
orientation: rows
source_code: embed
---
Row {data-height=650}
-------------------------------------

### Chart1

```{r setup, include=FALSE}
library(dygraphs)
library(flexdashboard)
library(readr)
library(xts)

```
```{r}
graph 
```

Row {data-height=350}
-------------------------------------

### Chart1Par1

```{r}
first parameter
```   

### Chart1Par2

```{r}
second parameter
```
Row {data-height=650}
-------------------------------------

### Chart2

```{r}
second chart main
```

Row {data-height=350}
-------------------------------------

### Chart2Par1

```{r}

```   

### Chart2Par2

 ```{r}

 ```

I'm expecting:

[MAIN------GRAPH1]
[PAR---1][PAR---2]

[MAIN-----------2]
[PAR2--1][PAR2--2]

I'm getting:

[MAIN-------GRAPH1]
[PAR1][PAR2][MAIN2]
[PAR2---1][PAR2--2]

Solution

  • It could be something with your spacing - after some editing I am getting this to output to your desired layout:

    ---
    title: "Untitled"
    output: 
      flexdashboard::flex_dashboard:
        orientation: rows
        vertical_layout: scroll
    ---
    
    Row {data-height=650}
    -------------------------------------
    
    ### Chart1
    
    ```{r setup, include=TRUE}
    library(dygraphs)
    library(flexdashboard)
    library(readr)
    library(xts)
    ```
    
    ```{r}
    #graph 
    ```
    
    Row {data-height=350}
    -------------------------------------
    
    ### Chart1Par1
    
    ```{r}
    #first parameter
    ```   
    
    ### Chart1Par2
    
    ```{r}
    #second parameter
    ```
    
    Row {data-height=650}
    -------------------------------------
    
    ### Chart2
    
    ```{r}
    #second chart main
    ```
    
    Row {data-height=350}
    -------------------------------------
    
    ### Chart2Par1
    
    ```{r}
    
    ```   
    
    ### Chart2Par2
    
    ```{r}
    
    ```