Dashboards are particularly common in business-style reporting. They can be used to highlight the Outlines and key points of the report. The layout of the dashboard is usually based on a grid, with components arranged in “boxes” of various sizes.

With the flexdashboard package, you can

  • Use R Markdown to visualize a set of related data as a dashboard for publishing.
  • Embed a wide variety of components, including HTML widgets, R graphics, table data, and text annotations.
  • You can specify row or column layout (the components automatically resize to fill the browser and work well on mobile devices).
  • Storyboards can be created to present visualizations and associated comments.
  • Optionally, use Shiny to drive dynamic visualization.

To create a dashboard, you can create an R Markdown document using the output format FlexDashboard ::flex_dashboard. Of course, the easier way is to create the document in RStudio using the File -> New File -> R Markdown dialog box and select the “Flex Dashboard” template.

Note: If you are not using RStudio, you can also create a new FlexDashboard R Markdown file from the R console as follows:

rmarkdown::draft(
  "dashboard.Rmd", template = "flex_dashboard",
  package = "flexdashboard"
)
Copy the code

Flexdashboard complete documentation is as follows: rmarkdown.rstudio.com/flexdashboa… . This chapter introduces only some basic features and usage. Dashboards have many of the same features as HTML documents (section@ref (HTmL-document)), such as graphical options

MathJax formulae @ref(Figure-Options)), MathJax formulae @ref(Appearance-and-style)), MathJax formulae @ref(Appearance-and-style)), Header and text content (section@ref (includes)), Pandoc parameters (section@ref (pandoc-arguments)), and so on. So if you have time, I suggest you also read the previous chapters. In the meantime, we also suggest you check out the R help page. Flexdashboard ::flex_dashboard to learn more about flexDashboard features and options.

typography

The general rules for dashboard layout are:

  • Level 1: Generate the page;
  • Level 2: generate columns (or rows);
  • Level 3: Build a box (containing one or more dashboard components).

Here’s a simple example:

--- title: "Get Started" output: flexdashboard::flex_dashboard --- ```{r setup, include=FALSE} library(flexdashboard) ``` Column 1 -------------------------------------------------- ### Chart A ```{r}  ``` Column 2 -------------------------------------------------- ### Chart B ```{r} ``` ### Chart C ```{r} ```Copy the code

Note that the series of dashes under the first line of text (Coluumn) is an alternative Markdown syntax for the second level heading, namely:

Column 1
--------------------------------------------------
Copy the code

Is equivalent to

## Column 1
Copy the code

We used a series of dashes, just to make the second section stand out in the source document.

By default, section 2 generates columns on the dashboard, and section 3 vertically stacks columns. So you don’t have to set up columns on the dashboard, because by default it will be stacked vertically, column by column.

The text in section 2 will not appear in the output. Section 2 headings are only used for layouts (for example, Column 1 in the example), so the actual content of the headings is not important at all. In contrast, level I and level III headings are more important.

The figure below shows the result of the above example in two columns, the first column containing “Chart A” and the second column containing “Chart B” and “Chart C”.

Note: We did not put any R code in the code block, so all boxes are empty. Within these code blocks, you can write arbitrary R code to generate R diagrams, HTML widgets, and various other components described in the @ref(Dashboards – Components) section.

Row-based layout

You can change a column-oriented layout to a row-oriented layout using the orientation option, for example:

output:
  flexdashboard::flex_dashboard:
    orientation: rows
Copy the code

The second level will be arranged by row, and the third level will be arranged by the columns in the row.

Section properties

The second section header contains properties such as: Set the column width to 350:

A narrow column {data-width=350}
--------------------------------
Copy the code

For a row-oriented layout, you can set the data-height attribute for the row. {.tabset} can be applied to columns so that the third section is arranged as tabs, for example:

Two tabs {.tabset}
------------------

### Tab A

### Tab B
Copy the code

The results are as follows:

More pages

When there are more than one level 1 content in a document, they appear as separate pages on the dashboard. An example is given below, as shown in the figure below.

--- title: "Multiple Pages" output: flexdashboard::flex_dashboard --- Visualizations {data-icon="fa-signal"} ===================================== ### Chart  1 ```{r} ``` ### Chart 2 ```{r} ``` Tables {data-icon="fa-table"} ===================================== ### Table 1 ```{r} ``` ### Table 2 ```{r} ```Copy the code

Note: A series of equals is an alternative Markdown syntax for first-level section headings (a single hash sign # can also be used).

The page title is displayed in the navigation menu at the top of the dashboard. In this case, we apply the icon to the page title through the data-icon attribute. Of course, you can find other ICONS available at the site, fontawesome.com.

The storyboard

In addition to a column – or row-based layout, you can use a “storyboard” layout to present a series of visualizations or related comments. Use the storyboard option to enable it.

Here’s an example, as shown below, with left and right navigation buttons at the top to help you navigate through all the storyboard content.

---
title: "Storyboard Commentary"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
---

### A nice scatterplot here

​```{r}
plot(cars, pch = 20)
grid()
​```

---

Some commentary about Frame 1.

### A beautiful histogram on this board

​```{r}
hist(faithful$eruptions, col = 'gray', border = 'white', main = '')
​```

---

Some commentary about Frame 2.`r xfun::file_string('examples/dashboard/03-storyboard.Rmd')`
Copy the code

The results are as follows:

Component {# dashboard – components}

A variety of components can be included in a dashboard layout, including:

  1. Interactive JavaScript data visualization based on HTML widgets.
  2. R graphics output, including base, grille, and grid graphics.
  3. Table (sorting, filtering and pagination are optional).
  4. Value box used to highlight important summary data.
  5. A meter used to display values on meters in a specified range.
  6. Various text annotations.
  7. Navigation bar, providing more links related to the dashboard.

Note: The first three components are available in most R Markdown documents, regardless of the output format. The last four components are meters-specific and are briefly described in this section.

Numerical box

If you want to include one or more values in the dashboard. You can use the valueBox() function in the FlexDashboard package to display individual values along with titles and optional ICONS. For example, here are three parallel sections, each showing a single value (see the output below) :

---
title: "Dashboard Value Boxes"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
---

​```{r setup, include=FALSE}
library(flexdashboard)
# these computing functions are only toy examples
computeArticles = function(...) return(45)
computeComments = function(...) return(126)
computeSpam = function(...) return(15)
​```

### Articles per Day

​```{r}
articles = computeArticles()
valueBox(articles, icon = "fa-pencil")
​```

### Comments per Day

​```{r}
comments = computeComments()
valueBox(comments, icon = "fa-comments")
​```

### Spam per Day

​```{r}
spam = computeSpam()
valueBox(
  spam, icon = "fa-trash",
  color = ifelse(spam > 10, "warning", "primary")
)
​```
Copy the code

The results are as follows:

Here we focus on the third code block (### Spam per Day). Here the valueBox() function defines a value (spam) and specifies an icon (icon = “fa-trash”). And use the color of the color parameter box, using an ifelse() statement to make different colors appear depending on the value. Of course, there are other colors available: “Info “,” Success “and” Danger “(default:” Primary “). You can also specify any valid CSS color (for example: “# FFFFFF “, “RGB (100, 100, 100)”, etc.).

instrument

The meter displays the value on the meter in the specified range. For example, the bar gauge for a group of three meters is shown below (see Figure @ref(FIG :dashboard-gauge))

--- title: "Dashboard Gauges" output: flexdashboard::flex_dashboard: orientation: rows --- ```{r setup, include=FALSE} library(flexdashboard) ``` ### Contact Rate ```{r} gauge(91, min = 0, max = 100, symbol = '%', gaugeSectors( success = c(80, 100), warning = c(40, 79), danger = c(0, 36)) {r} gauge(37.4, min = 0, Max = 50, gaugeSectors(success = c(41, 50), warning = c(21) 40), danger = c(0, 20) )) ``` ### Cancellations ```{r} gauge(7, min = 0, max = 10, gaugeSectors( success = c(0, 2), warning = c(3, 6), danger = c(7, 10) )) ```Copy the code

The results are as follows:

This example requires some explanation of the following points:

  1. gauge()Function to output a dashboard. It has three arguments that must be included:value.min 和 max(Can be any number).
  2. You can specify an optional symbol (symbol) and values (in the example,”%“Used for percentages).
  3. You can usegaugeSectors()The function specifies a set of custom color sectors. The default color is green. Sector options (sectors) can specify a range of three values (success.warning 和 danger) causes the color of the dashboard to change according to its value.

Text annotations

If you need to include additional narrative notes in the dashboard, you can do so by:

  1. Before displaying the dashboard, you can add the appropriate text at the top of the page.
  2. You can define a dashboard that does not contain diagrams, but contains any content (text, images, equations, etc.).

For example, the figure below contains a few content notes at the top and a content only dashboard at the bottom right (see FIG :dashboard-text) :

--- title: "Text Annotations" output: flexdashboard::flex_dashboard: orientation: Rows -- Monthly Deaths from Contraceptive tis, Emphysema and Asthma in the UK, 1974-1979 (Source: P. J. Diggle, 1990, Time Series: A Biostatistical Introduction. Oxford, table A.3) ```{r setup, include=FALSE} library(dygraphs) ``` Row {data-height=600} ------------------------------------- ### All Lung Deaths ```{r} dygraph(ldeaths) ``` Row {data-height=400} ------------------------------------- ### Male Deaths ```{r} dygraph(mdeaths) ``` > Monthly deaths from lung disease in the UK, 1974 -- 1979 ### About dygraphs This example makes use of the Dygraphs R package. The Dygraphs package provides rich facilities for charting time-series data in R. You can use dygraphs at the R console, within R Markdown documents, and within Shiny applications.Copy the code

The results are as follows:

Note: Each component in the dashboard can include a title and comment section. The title is the text after the title of the third (###) section. A comment is any text beginning with > after the block of code that produces component output.

The navigation bar

By default, the dashboard navigation bar includes the title, author, and date of the document. When the dashboard has multiple pages (@ref(multiple-pages) section), the left side of the navigation bar also includes links to individual pages. You can also add social links to the dashboard.

You can also add custom links to the navigation bar using the Navbar option. For example, the following option adds an “About” link to the navigation bar:

---
title: "Navigation Bar"
output:
  flexdashboard::flex_dashboard:
    navbar:
      - { title: "About", href: "https://example.com/about" }
---
Copy the code

The interface is as follows:

The navigation bar item must include either a title or an icon field (or both). You should also include an href as the navigation target, and align can also be set (the default is right).

Of course, you can also add links to social sharing services via the Social option. For example, the dashboard below includes links to Twitter and Facebook, as well as a drop-down menu with a more complete list of services:

---
title: "Social Links"
output:
  flexdashboard::flex_dashboard:
    social: [ "twitter", "facebook", "menu" ]
---
Copy the code

The interface is as follows:

Social options also include the following: “Facebook,” “Twitter,” “Google-Plus,” “linkedin” and “Pinterest.” You can also specify “menu” to provide a common shared drop-down menu of all services.