Using R to Create Free Online Dashboards

It is now possible to create public dashboards, based on R code, for free! To illustrate how it works, I’ve used the free version of Displayr to create a copy of RStudio Connect’s HTML Widgets Showcase.

Getting started

The first step is to click this link which will prompt you to sign up. Sign up is free. Then all you need to do is click  + Add New  and then  Create  to make a new dashboard. You will be looking at a blank page.

Creating an interactive street map

We will start by creating the interactive street map shown below, which shows where R started. Depending on what type of device you are using, you can zoom in by touching the screen, or by using the + and – buttons at the top left.

We can create this in a few seconds (or, click here and go into Displayr and view the source code):

• Click into the title field at the top and type Leaflet.
• Press Insert > R Output (Analysis), which is in the ribbon at the top of the screen.
• Copy and paste the R code below into the R CODE box in the Object Inspector (on the right of the screen).
• Press  CALCULATE .

With those few steps, you have already built a quick dashboard! If you want to share it with a friend, just click Export > Public Web Page and send them the link. A  professional Displayr account will allow you to explore publishing private dashboards that are password protected.

 
library(leaflet)
leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")

Creating an interactive time series chart

Now we will create a second page, with the interactive time series chart shown below. The nice things about this visualization are that you can hover over the line to see the values, and can move and resize the “window” at the bottom.

To create this yourself:

• Press Home > New Page > Title Only.
• Click into the title field at the top and type Dygraph.
• Press Insert > R Output (Analysis).
• Copy and paste the R code below into the R CODE box in the Object Inspector.
• Press  CALCULATE .

 
library(dygraphs)
dygraph(nhtemp, main = "New Haven Temperatures") %>% 
  dyRangeSelector(dateWindow = c("1920-01-01", "1960-01-01"))

Creating interactive heatmaps, column charts, and bubble charts

We can follow exactly the same steps to create heatmaps, bar charts, and bubble charts, using the three snippets of code below.

Heatmap Example

 
library(d3heatmap)
d3heatmap(mtcars, scale="column", colors="Blues")

Bar Chart Example

 
library(plotly)
p <- ggplot(data = diamonds, aes(x = cut, fill = clarity)) +
            geom_bar(position = "dodge")
ggplotly(p)

Bubble Chart Example

 
library(metricsgraphics)
mjs_plot(mtcars, x=wt, y=mpg) %>%
  mjs_point(color_accessor=carb, size_accessor=carb) %>%
  mjs_labs(x="Weight of Car", y="Miles per Gallon")

Formatting

We’ve now done the hard bit (getting the R code), and can move on to the formatting. The page below has been created by adding boxes, adding text, and playing around with size and color. Key options to use are:

• Resize the page: Home > Layout > Page Size > Custom. I set it to 16 inches by 9 inches. It will automatically scale to whatever size browser you use.
• Add a box: Insert > Shape > Rectangle. You can modify the colors in the Object Inspector.
• Add text: Insert > Text Box. You can modify the colors in the Object Inspector.
• Change which things are on top of which others using Appearance > Send to Back and the associated options.
• Align things by dragging and looking at the guides, using Appearance > Align, or setting the pixel level controls in the Object Inspector.

Saving time using Duplicate

The most efficient way to work is to first create one page, so that it is exactly like you want, and then, rather than doing it all again, click on the page in Pages (left side of the screen), and press Home > Duplicate. Then it’s as easy as modifying the duplicate of the page. You can also duplicate other things in the same way, such as text boxes and analyses.

Navigation

By default, Displayr will create a navigation bar like the one shown below (on the left). However, we can hide this and create custom navigation using hyperlinks.

To create a hyperlink between pages in a dashboard:

• Export the dashboard and copy the address (URL) of the page that you want to link to.
• Go back into edit mode (where you created the dashboard), and select the object you want the user to click on to navigate. In this example, I’ve put the hyperlinks onto the text boxes at the top of the page, to replicate the functionality of the RStudio Connect dashboard. You can also create hyperlinks on individual words in text boxes, or on other objects, such as boxes and charts.
• Press Insert > Hyperlink and paste the address and press OK.
• Once you have created and tested all the hyperlinks, you can turn off the navigation bar by clicking on the bottom of the Export > Public Web Page button and choosing Hide navigation bar and then Export.

Next steps

As mentioned at the beginning of the post, you can do all this yourself in the free version of Displayr. Or, if you want to inspect and modify the dashboard that I have created, click here.

Need some help or have a question? Let us know and one of our experts will be in touch.