Join the Shiny Community every month at Shiny Gatherings

My Shiny Dashboard with no experience Thumbnail

How I built an interactive Shiny dashboard in 2 days without any experience in R – R Shiny Dashboard Tutorial


Updated: May 23, 2022

R Shiny is a great way to quickly display data and create interactive dashboards, and it is the backbone of many of Appsilon’s projects. As a Project Leader, I needed to understand the challenges that come with working in this environment, even though I personally have never used R before. In this R Shiny dashboard tutorial, I will discuss my experience with learning R and show you how to build a Shiny dashboard in just two days without any prior knowledge.

The only programming language I have ever got any hands-on experience with is Python and I would say that I know it on a “google it and try it” level. I thought learning R would be quite a challenge. Fortunately, I discovered that there are many examples of R Shiny code out there that I could use, so I started immediately. I was really surprised by how easy it is to start writing code in R.

The opportunity to apply this knowledge and develop my skills in R Shiny presented itself quickly. I needed to prepare a report for my manager and an interactive dashboard seemed like the best way to present the large amount of data I was working on.

Do you want to start a career as an R Shiny Developer? Our complete guide for beginners has you covered.

Table of contents:


My Journey with R and R Shiny Dashboards

Within just two days I had a functional app that showed all of the data I wanted to display. The dashboard made it easy to analyze the data in a way that would be useful for business decisions. I created something that I knew would be used in the future.

Image 1 - My dashboard

Image 1 – My dashboard

On the second day, I already felt more confident and I wanted to develop my dashboard further. And then the problems started. I realized that starting programming in Shiny is easy but it gets tricky if you want to customize the app. I thought it was a good opportunity to learn from somebody more experienced and got help from one of our developers. The results definitely exceeded my expectations.

Image 2 - Dashboard by Pedro, in dark mode

Image 2 – Dashboard by Pedro, in dark mode

Ultimately, R Shiny is an excellent tool for quickly creating visually appealing and useful dashboards and is relatively easy to learn. However, there are two major challenges to deploying more advanced solutions.

First, introducing custom dashboard designs might prove difficult without a certain degree of familiarity with CSS and JavaScript. Second, the process of moving the app to production requires more advanced skills as well. My app is never used by more than 2 users concurrently, so it is not much of an issue. However, making it available to a few hundred people does require extra steps.

I still would encourage developers to create Proof of Concept solutions in R – moving them to production certainly is possible. In one of the projects I lead, we created an R Shiny app that is being used by 500 users. Productionisation is a challenging exercise indeed, and it is one of the specialties of Appsilon Data Science. If you want to discuss building enterprise decision support dashboards, feel free to reach out.

The slide below provides a hint at what supports a solid production-ready Shiny application. Read on for the details of my experience with code samples which should help you build your first dashboard.

Image 3 - What goes into a production-ready Shiny app

Image 3 – What goes into a production-ready Shiny app

R Shiny Dashboard Tutorial – Source Code and Explanations

Let’s say that we have data that represents a set of industries, companies, and the frequency of a certain event for each company:

Image 4 - match_name_table and industries_table

Image 4 – match_name_table and industries_table

UI/Server

To get started I looked into the structure of an R Shiny app. I found out that the main file is divided into two parts, UI, and server. The ui is built from sidebarPanel and mainPanel.

The sidebarPanel contains input controls that can be passed to the mainPanel. The mainPanel contains items defined on a server-side that we would like to display in the app.

As you can see below, my app contains four inputs, two plots, one table, and a text field. For the sake of clarity, I am not showing the entire code at once. I used (…) for the lines of code that will be explained later.

library(jsonlite)
library(dplyr)
library(data.table)
library(shiny)
library(shinyWidgets)
library(DT)
library(plotly)
    
ui <- fluidPage(

    sidebarLayout(
    sidebarPanel(
        sliderInput(...),     
        sliderInput(...),      
        pickerInput(...),      
        sliderInput(...),
        width = 2
    ),
    
    mainPanel(
        plotlyOutput("distPlot"),
        dataTableOutput("view"),
        tableOutput("view2"),
        plotlyOutput("distPlot2"),
        width = 10
    )
    ))
    
    server <- function(input, output, session) {
        no_of_companies <- reactiveVal(0, "Number of Companies:")
        
        observeEvent(..)
        observeEvent(...)
        output$distPlot <- renderPlotly(...)
        output$view <- DT::renderDataTable(...)
        output$distPlot2 <- renderPlotly(...)
        output$view2 <- renderText(...)
    }

shinyApp(ui = ui, server = server)

Sliders

The data set used in the app was quite big and I wanted to give the user the possibility to filter it out using sliders. The first slider allows defining a filter based on the values from the Freq column in the industries_table.

sliderInput(
    inputId = "freq",
    label = "Frequency grater then",
    min = 0,
    max = min(10 , max(as.numeric(industries_table["Freq"][, 1]))),
    value = 1
)
Image 5 - Slider control example

Image 5 – Slider control example

I then realized that the user might want to focus only on the industries which are the most common in the data set. That is why I created a slider that allows the user to select the number of bars shown on the first bar chart. This way the user could see only the top n industries from the data set on the plot.

sliderInput(
    inputId = "no_of_industries",
    label = "Number of industries on chart:",
    min = 1,
    max = length(industries_table["Freq"][, 1]),
    value = 5
)
Image 6 - Slider control example (2)

Image 6 – Slider control example (2)

The maximum value of the second slider is based on the number of rows in the industries_table table, which depends on the first slider input. I needed to update the maximum value for the second slider every time the user changes the value in the first slider.

Here I used a reactive expression called observeEvent which allowed me to monitor the changes and update the slider input if necessary. The grayed-out part is responsible for preparing the data and will be explained later. The code below tells us that we will monitor the freqslider and change the maximum and the default values of no_of_industries slider.

Then, I added one more slider and observer built in the same way as the one above.

observeEvent(input$freq, {
    min_value = input$freq + 1
    max_value = max(as.numeric(match_name_table["Freq"][, 1]))
    match_name_table = match_name_table[match_name_table$Freq % in % min_value: max_value), ]
    x <- order_company_per_industry_counts(match_name_table)
    updateSliderInput(
        session,
        inputId = "no_of_industries",
        min = 1,
        max = length(x),
        value = length(x)
    )
})

I also added a picker which enables the user to see only the companies from the industries in which they are interested.

shinyWidgets::pickerInput(
    InputId = "industries",
    label = "Industry",
    choices = unique(match_name_table[3][order(match_name_table[3]$industry), ]),
    selected = unique(match_name_table[3][order(match_name_table[3]$industry), ]),
    options = list('actions-box' = TRUE),
    multiple = T
)
Image 7 - Industry selector/filter

Image 7 – Industry selector/filter

Plots

The first plot I created was a bar chart that shows the frequency for each industry. I used an R Shiny library called Plotly.

Image 8 - Bar chart made with Plotly

Image 8 – Bar chart made with Plotly

I assigned the renderPlotly function to the first output called distPlot.

output$distPlot <- renderPlotly({
    min_value = input$freq + 1,
    max_value = max(
        as.numeric(match_name_table["Freq"][, 1]),
        match_name_table = match_name_table[match_name_table$Freq %in% min_value:max_value)
    freq_values <- order_company_per_industry_counts(match_name_table)["Freq"][, 1]
    industries <- order_company_per_industry_counts(match_name_table)["industry"][, 1]
    n <- as.integer(input$no_of_industries)
    freq_values <- freq_values[(length(freq_values) - n + 1):length(freq_values)]
    industries <- as.character(industries[(length(industries) - n + 1):length(industries)])
    
    xform <- list(categoryorder = "array", categoryarray = industries, tickangle = -45) 
    plot_ly(y = freq_values, x = industries, type = "bar") %>%
        layout(xaxis = xform)
})

The first part of the code deals with data preparation. The idea is to display the data only for companies that have a frequency higher than min_value are filtered out from the match_name_table table. The min_value is defined based on the freq input.

Industry names and the number of companies that visited the website are then assigned to the resulting freq_values and industries. The last thing we have to do is to limit the number of bars displayed on the plot to input$no_of_industries elements. Together, we have all the building blocks for our bar chart.

A list called xform is used here to maintain the order of the industries and set the angle of the labels to 45 degrees. The default is to display the data alphabetically.

plot_ly(y = freq_values, x = industries, type = "bar") %>%  layout(xaxis = xform)

Is equivalent to:

layout(plot_ly(y = values, x = industries, type = "bar"), xaxis = xform)

order_company_per_industry_counts is a simple function that counts the number of companies for each industry and orders the data in descending order.

The order_company_per_industry_counts method looks like this:

order_company_per_industry_counts <- function(match_name_table) {
    new_table = table(match_name_table$industry)
    new_table <- as.data.frame(t(new_table))
    new_table <- subset(new_table, select = -c(Var1))
    new_table <- new_table[order(new_table$Freq),]
    return(new_table)
}

Reactive value

I added one more bar chart displaying the frequency for all companies. I thought it would also be nice to display the count of all of the companies from the plot. To achieve this I needed to use a reactive value. The value was updated in the plot body and displayed as a text.

no_of_companies <- reactiveVal(0, "Number of Companies:")
    output$distPlot2 <- renderPlotly({
    ...
    no_of_companies(nrow(data_plot))
    …
    }
})
output$view2 <- renderText({
    paste("Total number of companies meeting the criteria:", no_of_companies())
})
Image 9 - Another bar chart

Image 9 – Another bar chart

Table

I thought that the user may want to see more detailed information about the companies. Here I decided to use the DT library.

output$view <- DT::renderDataTable({
    req(input$industries)
    min_value = input$freq + 1
    max_value = max(as.numeric(match_name_table["Freq"][, 1])
                    match_name_table = match_name_table[match_name_table$Freq %in% min_value:max_value), ]
                    comp_data = match_name_table[match_name_table$industry %in% input$industries,]
                    data = merge(x = comp_data,
                                    y = select(data_industries, 2,3,8,9,10,11,12),
                                    by = c("name"),
                                    all.x = TRUE)
                    data <- data[order(data$Freq), ]
                    if (nrow(data) == 0) {
                        print("Please change the Frequency to a smaller value")
                    }
                    else{
                        tail(data, as.integer(input$no_of_industries_in_a_table))
                    }
    })
Image 10 - Table made with DT library

Image 10 – Table made with DT library

Not a DT fan? Here are alternative R packages for visualizing table data.

The interesting part here is the first line. Before I added it the app was displaying an error every time the industry’s input was empty. Function req ensures that values are available before proceeding with an action.

Summary of R Shiny Dashboard Tutorial

In conclusion, you can definitely build “usable” R Shiny dashboards without prior R knowledge in only a couple of days. We use the term “usable” loosely because shipping production-ready and scalable dashboards in such as short time frame is a no-go.

Do you have a favorite introductory R tutorial? Add it below in the comments. If you’re ready to build a production-level dashboard, check out my colleague Pedro’s post “A journey from basic prototype to production-ready dashboard.”  And thanks for reading!

Follow Appsilon on social media