Flexdashboard Editing Instructions

What is a flexdashboard?

Flexdashboard is an easy way to publish a group of related data visualizations as a dashboard. To learn
more click here

Component syntax

A flexdashboard will have 3 components and they can be created as follow:

• Pages: A dashboard can be have multiple pages coded as below

Figure 1: Code to create multiple pages

and it will be displayed in the header as shown in Figure 2

Figure 2: Pages displayed in the header

• Data orientation: A charts in a dashboard can be arranged in a row orientation or column orientation
as shown in Figure 3 and 4
• Containers: To put a graph we have to first define a container using this “### Chart 1” notation.

Layouts

The dashboard can be arranged in the following layouts:

1. Layout by Column : This is defined by adding “orientation : column” in the yaml on the top or if you
want this layout for a page only define the page as “Page 1 {data-orientation : column}”
2. Layout by Row : This is defined by adding “orientation : row” in the yaml on the top or if you want
this layout for a page only define the page as “Page 1 {data-orientation : row}”
3. Tabset Column: This layout is defined by giving the orientation as column and besides the column add
the option tabset like “column {.tabset}”

1
Figure 3: Column Orientation Code

Figure 4: Row Orientation Code

Figure 5: Column Orientation Layout

2
Figure 6: Row Orientation Layout

Figure 7: Column Tabset Layout

3
 4. Tabset Row: This layout is defined by giving the orientation as row and besides the row add the option
tabset like “row {.tabset}”

Figure 8: Row Tabset Layout

5. Storyboard: This layout is defined by giving the option “storyboard: true” in the yaml file

Figure 9: Storyboard Layout

6. Scrolling: Use the option “vertical_layout: scroll” to get this layout.

How to edit the flexdashboard?

We have created a fexdashboard template on pricing which you can easily edit. The document is structured
with 5 main pages:
• Key Metrics : This page has the introduction and key metrics table.

4
 Figure 10: Scrolling Layout

• Visualizations: This page has sub sections containing the visualizations which are linked to each key
metric.
– Key Metric 1
– Key Metric 2 ..
• Sample HTML Widgets : This page shows some examples of HTML widgets in a tabular layout.
• Sample Layouts : This page has sub-sections with an example of the available layouts
• Sample Shiny Widgets : This has a list of the popular shiny widgets.
The document can be edited by following the steps given below:

Step 1: Change Title

Change the title, author, version and date of the dashboard in the first 3 lines of the rmd code. These
headings are also linked to the key metrics page of the dashboard as shown in figure 11

Figure 11: Header Section

Step 2: Add Introduction

Go to the first section of the “Key metrics” page and add the introduction as shown in figure 12

Figure 12: Introduction

5
Step 3: Add Key Metrics

On the same page, the second section has an overview of the key metrics table which is read from a csv file
like shown in Figure 13. Each key metric in the table is linked to the respective visualization page which can
be done by put your respective section name which can be seen in the above image from lines 132-135

Figure 13: Key Metrics

Step 4: Add Visulizations for the Key Metrics

Now we move on to the visualization section. Here you can add your graphs in the respective sections.
The template has a few examples which links to the respective libraries in the Sample HTML Widget and
Storyboard layout section. There are a lot of other available HTML widgets which can be found here
http://gallery.htmlwidgets.org/

Step 5: Comments

For each graph you would want to add some obervations or comments, this can be done in two ways:
1. Normal page layout with column or row layout: In this case just add comment as another container
and fill the text.

Figure 14: Comment Section

2. Storyboard layout : In the storyboard layout you can add commentary for each graph as shown below:

Figure 15: Commentary Section

This will be displayed on the right hand side on the dashboard.

6
 Figure 16: Storyboard layout with commentary

Downloading

To download the dashboard as HTML “flex_download.Rmd” has to be edited to match your main Rmd file.
The difference between this file and the main file is that the main file uses shiny functions like renderPlot
which has to be replaced by non-shiny functions like print or plot.
Once this file is ready then you can click on the “Download As HTML” button on the Key metrics page.

Dependencies

The teamplate has the following list of dependencies which are all available in the zip:
• EDAUtils package: This package installs a list of given packages with respective versions on Linux and
Windows machine.
• hotel_data.RDatav : This contains the dataset variables which will be used in the visualization section
in the template.
• sample.csv : This file contains the data for the key metrics table.
• flex_download.Rmd : This file used to download the report as HTML.