Build beautiful dashboards rapidly.

This is part one of a growing series on data reporting with micro services. For deploying web apps and this Flexdashboard in particular see part two, Deploying a Shiny Flexdashboard with Docker. For deploying dashboards at scale in production with a Shiny Proxy server, see part three.

Most modern businesses rely on data. The demand is ever growing for skilled people who can supply accurate, relevant and intelligible data insights consistently and fast. Those needs are hard to meet and more often than not at stake with each other. They can be met through supplying interactive data dashboards which are mostly used for internal business KPIs, but can also be used as a way to interact with stored data, as a sales platform or as production tool. R Shiny is a convenient framework for producing reactive and powerful dashboards. I will show you how to easily make beautiful dashboards with Shiny reactivity in R via the flexdashboard package.

The basic Flexdashboard with Shiny elements we are going to build in this article:

Why Flexdashboard?

A Flexdashboard is build from an Rmarkdown file. Rmarkdown is a powerful framework for generating reports as HTML, PDF, Word documents, as a slideshow or make whole websites. If you are familiar with Rmarkdown, you already now how easy it is to style documents with Markdown syntax and CSS. There is a plethora of interactive HTML Widgets you can use with an RMarkdown file rendered to HTML like interactive Data Tables or various Plotly graphs, and link data points across HTML Widgets via crosstalk. In essence, a Flexdashboard is an HTML report, but adds conveniently styled dashboard or slideshow elements. More important, you can use Shiny reactive elements and make it a full reactive web app when hosted on a server. Alternatively you can use a Flexdashboard rendered to an HTML file as a static report in dashboard format.

Building the Flexdashboard

First, install the R library flexdashboard . If you make a new R Markdown document you now will have a Flexdashboard template from which you can create your document. Flexdashboards are defined by a YAML header which we will have a look at. Options in the YAML header will configure many details of your Flexdashboard, we will only go over the most important ones here.

output:

• flex_dashboard: defines the format
• orientation: if dashboard elements are ordered in row or columns
• social: how and if social sharing links should be embedded
• theme: bootswatch styling theme, 14 themes available
• source_code: if and how the source R code should be available
• There are variuos other important output options not used here, just to name a few examples, css: add custom CSS style, vertical_layout: enable scrolling, logo: add logo to your dashboard

runtime:

• shiny: enables running reactive Shiny elements

Structuring the Flexdashboard

Level 2 Markdown headers ————— define either row and columns with associated widths/heights. If no widths/heights are defined the rows and columns are split equally. Level 3 headers ### split elements further inside a row or column. You can also use {.tabset}as in an Rmarkdown document at every level to get tabsets.

For a multiple page Flexdashboard use Level 1 header ============= to define pages. You can overwrite the element orientation from the YAML header with {data-orientation= } and give it an icon with {data-icon= }. Headers of every level can be linked as in Rmarkdown with [linktext](#headername).

We will create a two page dashboard. The first page has one row partitioned into two columns of unequal sizes for demonstration purpose. The second page has a default input sidebar with fixed color and width on the left and one big element on the right. Note that I do not necessarily need to give a a data-width argument here and that you can define a global input sidebar for all dashboard pages if you define the sidebar on Level 1.

The dashboard content

We will make the NBA example Flexdashboard from user jjallaire on the first dashboard page to demonstrate HTML widget functionality. The first code chunk is for loading the necessary R libraries and importing the data.

On the second page we will demonstrate basic Shiny reactivity. We will make an input button in a sidebar on the left, which reacts on button press with rendering a Plotly interactive graph. We insert a progress bar in the reactive function with withProgress(message= , value= {function}) and increment the progress bar with incProgress(). This element adds to the user experience, especially when rendering graphs or importing data takes long. Try out the button reactivity in the embedded dashboard on top! You can find the complete code on my GitHub repo.

Deployment

Now we can view the dashboard locally for testing it. You can either use the “Run” button in Rstudio to render the Rmd file and open it in your browser in the Viewer pane, or do this manually via the R command rmarkdown::run(“pathto/dashboard_example.Rmd”, shiny_args = list(port = 3838, host = “0.0.0.0”)). Then you reach the dashboard in your webbrowser via http://localhost:3838 or any other host and port you defined via shiny_args.

You can also render the Rmd file to a static HTML file with command rmarkdown::render(“pathto/dashboard_example.Rmd”). The advantage is that you can send the file as report via email, either as link, attached file or even embedded in the body of the mail. The option to make slides in Flexdashboard and make a static report can be a great way to present your analytics results. The big disadvantage is that you can not use Shiny reactivity. See page two of the below embedded static HTML file.

If you find this article useful do not forget to clap those hands and follow me for more!

Basic web deployment

For a reactive web app, the Flexdashboard needs to be deployed on a web server. You can easily do this on shinyapps.io, you need to have an account for deployment and you can have five apps with the free version. Deploying an Rmd file is similar and as easy as deploying a Shiny app.

You can deploy the app on your own server or with a cloud service as AWS. I recommend deploying the app within a Docker container. Learn why and how you should do this in part two of this series, Deploying a Shiny Flexdashboard with Docker.

This article was also published on http://www.r-bloggers.com/.

Shiny Dashboards with Flexdashboard was originally published in Analytics Vidhya on Medium, where people are continuing the conversation by highlighting and responding to this story.