Ultimate Guide: How to Create Web Based Dashboard from Scratch
- Pribadi Pramudya -
13 July 2018 · Baca 15 menit
[ dashboard ]

This article will walk you through how to make a web based dashboard in R using shinydashboard package.

It can seem overwhelming when you are first getting started, so we will start by knowing what exactly is a dashboard anyway.

Why you should create one?

The type of dashboard.

Dashboard maker software.

and finally, the step by step detailed guide how to create web based dashboard from scratch.


Table of Content


What is Dashboard?

In my opinion, Stephen Few’s definition in his book “Information Dashboard Design” is the best way to describe “dashboard”:

a visual display of the most important information needed to achieve one or more objectives; consolidated and arranged on a single screen so the information can be monitored at a glance.

I wil break down this sentence into keywords so you can understand it easily:

This three keywords is essential and will guide you to design dashboard effectively.

Take a look one example of dashboard you used to see almost every day: vehicle dashboard.

It shows the most important information of your vehicle current condition while you driving: speed, oil pressure, and fuel level.

You can view and monitor all this information right in front of you, at a glance. The vehicle display is designed to get you through your destination safely.

8 Reasons Why You Should Have a Dashboard at Your Workplace

Reason#1: Focus on Your Goal, Vision, dan Mission

If you are an employee working on a company, your department usually have target to achieve. This target called key performance indicator or KPI.

KPI is some kind of summaries set by your management which contain objective, vision, and mission of your company.

Dashboard is well known for showing this KPI.

Having KPI on dashboard will make you stay focus to tackle all relevant tasks and activities to achieve your individual or organization goal.

Reason#2: Shows Big Picture of Your Company or Business Condition

A company is built to create profit. If your company could not create sustainable profit, then your company is not in good condition.

Revenue is another one of important indicator that have strong relation with profit.

These two indicators, profit and revenue can be displayed on a dashboard.

The dashboard shows you these indicators so you know the financial condition of your company currently.

Put another important metrics like expenses or total users or customers and you have a better bigger picture of what really happen in your company or business.

Reason#3: Shows Early Warning of Your Upcoming Problem

Early warning system can be implemented in a dashboard. The highlighted numbers and indicators will keep you warned when your target or KPI is not achieved yet.

This type of dashboard will excel in operational or maintenance workplace, such as power or manufacturing plant, which require immediate response when trouble happened.

The risks that occurred will be minimized and can be prevented.

Reason#4: Increase Collaboration and Communication in Your Workgroup

Dashboard is a communication tool.

Who are you communicate with?

Stakeholders.

All parties related to achieve your company’s goals effort. Board of director, your superior or subordinate, your vendor, senior manager.

Dashboard unite stakeholders and make coordination and collaboration possible effectively between them.

Reason#5: First Step to a Better Change

The initiative to make dashboard is a first step of change in order to make your company better than before.

Dashboard makes the performance of each line or department become more transparent and can be seen by every party involved regarding achieving your company’s goals.

The openness of access to information and performance makes each line or department more excited to make their best achievement for your company’s glory.

Other than that, dashboard can also give feedback or evaluation to performance results. From this evaluation, of course your management can take the effort or program to make the performance even better.

Reason#6: Increase Efficiency and Productivity

Thanks to dashboard in their first year, IBM realized cost efficiency around 2 Million Dollars.

That cost efficiency is gained by using dashboard that minimalized data processing and reporting manually that gives efficiency and work productivity in all of IBM’s company line.

Gathering and processing data manually using a spreadsheet application have a high typo risk (human error) and also use a lot of time and energy.

That process can be automated by using programming code in dashboard, which can show information or report according to the user’s needs.

The dull and repetitive process of data processing can be minimalized or even removed so you can save time, energy, or cost and also can allocate that resource to another department you feel more important.

Reason#7: Easier to Make Decision

Now, you don’t have to make a decision just based on feeling, because it’s already on dashboard.

Facts and data analysis, even a program recommendation that can be taken can be shown in dashboard. Information summary from each line or department or in a small unit can be managed so it can be shown at a glance so it makes your decision making more effective.

You also don’t have to spend a long time in making a decision, waiting for data, facts, reports and analysis from each department. Just look at the information at the dashboard, you can be faster in making the best decision for your company.

Reason#8: Simplify Complex Data

If your company data is taken from various sources and structures, it can be said that your company data is complex.

This complex data can be simplified by programming. Dashboard makes this complex data “forced” to be simplified so you can easily gain insight from that complex data.

Visualization in the form of chart in dashboard will make that complex data simpler.

By multiple views like chart and the summary, you can easily gain information and strategic insight to make a new innovation for your company.

Dashboard Type

Dashboard is divided into 3 types: strategic, analytic, and operational.

#1: Strategic Dashboard

This Dashboard shows company strategic information and summary that is usally used by management or director level. Total sales data, total profit, and profit margin are some example that is shown in strategic dashboard.

#2: Analytic Dashboard

It shows analysis data so we can get the pattern, the trend, and insight from a case study or problem. For example, the user want to know the information of 5 products with the highest sales or percentage of churn customer month to date.

#3: Operational Dashboard

The dashboard shows the latest data (even updated in real time) from a business operational activity. The number of website visitor and server workload are some information examples that showed on operational dashboard.

Dashboard Maker Application

There are a number of applications that can be used to make a dashboard. I will explain a little bit about the 3 applications I have used: Microsoft Excel, Tableau, and R Shiny.

Excel, Tableau, and R Shiny Comparison:

#1: Microsoft Excel

This one is everyone’s application. All professional must have used it. By data manipulation, format, linking to the main sheet, you can make a dashboard with Excel. The drawback is, to make a web-based Excel dashboard, you have to know about VBA programming (macros).

#2: Tableau

This data visualization software is the most popular software because it’s easy to use. For you who don’t know any programming language, you don’t have to worry, just point, click, drag, and drop, you can make a beautiful chart. Combine the charts you made in one page, and you have a dashboard.

It’s very easy.

If you have enough fund to buy the license, Tableau will definitely be your first choice.

#3: R Shiny

Shiny is one of the packages in R language that makes it easier for you to make a web-based applocation without having to master the HTML, CSS, or JavaScript programming language.

Well, you just have to master the R programming language to make a web-based dashboard.

Don’t worry, in this article I will guide you step by step how to make a web-based dashboard using R Shiny.

R at Glance

R is a free software for computing and statistical data analysis and also showing visualization chart. R is supported by thousands packages made by many active contributors so it makes it easy for the user to develop an application.

Shiny is one of R’s packages.

R is widely used by all people from various fields, starting from academic to business.

This programming language can be installed in all operation system: Windows, Linux, or Mac. To simplify R based application development, I recommend you to install IDE (Integrated Development Environment) for R, which is RStudio.

So, to start making a dashboard, R and RStudio must be installed first on your computer.

The next question is how to make a dashboard?

6 Steps How to Create Web Based Dashboard

Step#1: Install R and RStudio

Choose installer for your operating system.

  • R can be downloaded here.
  • RStudio can be downloaded here. Find RStudio desktop version.

After you install it successfully, open RStudio.

RStudio layout: Script, Console, Variable, and Output

Step#2: Install R Packages

Packages are one of the most important part in R environment. With packages, you don’t have to create specific program from scratch. Some developers probably have created your program, so you just find it at CRAN repository and install it.

To install package, use this command: install.packages()

Then, what packages to install?

Here is the list:

  • tidyverse (for data manipulation)
  • shinydashboard (to create dashboard)

At CONSOLE, type this command:

install.packages("tidyverse")
install.packages("shiny")
install.packages("shinydashboard")

Step #3: Download Dataset

Download Telco Customer Churn.

File name: WA_Fn-UseC_-Telco-Customer-Churn.csv

Let’s say, you are an analyst in a telco company who wants to know why some customers churn to another competitor.

This dataset consists of some information about:

  • Customers churn starting last month – this column is named Churn.
  • What service they subscribe for – phone, multiple lines, internet, online security, online backup, device protection, tech support, streaming TV, movies.
  • Customer information – how long they have been subscribed, type of contract, how to pay, do they use a paperless bill, monthly bill, and total bill.
  • Customer demographic info – gender, age, and if they have a spouse and independent.
  • For the guide in making this dashboard includes information of total customer, total income, number of churn customer, and churn percentage.

There is also an interactive chart of the number of the customer divided by internet service category and subscription contract.

And how many customers that are churn and not churn.

Last but not least, a chart that shows what factor that have the highest churn percentage, thus from this information we can make a program proposal to reduce the churn customers based on that factor.

Step#4: Create New Project in RStudio

In the 3 previous steps we have done the preparation step, now comes the main step, which is making the application and writing the program.

  • On then top menu bar, click File > New Project > New Directory > New Project
  • Name the Directory, let say “dashboard” and click Create Project.
  • Move dataset you just download to folder “dashboard”.
  • Click File > New File > R Script
  • Click floppy disk little icon at left top to save file.
  • Rename it to app.R.

Shiny application structure can also consist of two file script: ui.R and server.R which should be stored in project directory.

  • ui.R set the layout and interface design.
  • server.R set server function definition.

You can also create Shiny app in one file named: app.R.

In this guide, we are going to use app.R file. It is easier for you to copy - paste the code and run it in your own RStudio platform.

Step#5: Write the Script

The following is the script with explanation comment:

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# CHURN DASHBOARD
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# This application covers how to create: 
# - summaries using dplyr
# - modifikasi tema ggplot2 theme modification
# - interactive chart
# - bar chart
# - web based dashboard which can be accessed at
#   shinyapps.io
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# LOAD PACKAGES
# - tidyverse for data manipulation
# - shinydashboard to create web based dashboard
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

library(tidyverse)
library(shinydashboard)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# READ DATASETA
# Read CSV file and save it in variable "data".
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

data <- read.csv("WA_Fn-UseC_-Telco-Customer-Churn.csv")

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# DATA MANIPULATION
# Create a new data table to analyse the highest 
# factor that affect customer churn using dplyr
# (part of tidyverse). Number of customers are
# calculated in each variable.
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

churn.customer <- data %>% 
  group_by(Churn) %>% 
  summarise(
    Male = length(customerID[gender == "Male"]),
    Female = length(customerID[gender == "Female"]),
    Senior = length(customerID[SeniorCitizen == 1]),
    Non.Senior = length(customerID[SeniorCitizen == 0]),
    Non.Partner = length(customerID[Partner == "No"]),
    Partner = length(customerID[Partner == "Yes"]),
    Dependent = length(customerID[Dependents == "Yes"]),
    Independent = length(customerID[Dependents == "No"]),
    Phone = length(customerID[PhoneService == "Yes"]),
    Non.Phone = length(customerID[PhoneService == "No"]),
    Multi.Line = length(customerID[MultipleLines == "Yes"]),
    Non.Multi.Line = length(customerID[MultipleLines == "No"]),
    DSL = length(customerID[InternetService == "DSL"]),
    FO = length(customerID[InternetService == "Fiber optic"]),
    Non.Internet = length(customerID[InternetService == "No"]),
    OL.Security = length(customerID[OnlineSecurity =="Yes"]),
    Non.OL.Security = length(customerID[OnlineSecurity =="No"]),
    OL.Backup = length(customerID[OnlineBackup =="Yes"]),
    Non.OL.Backup = length(customerID[OnlineBackup =="No"]),
    Protection = length(customerID[DeviceProtection =="Yes"]),
    Non.Protection= length(customerID[DeviceProtection =="No"]),
    Support = length(customerID[TechSupport =="Yes"]),
    Non.Support = length(customerID[TechSupport =="No"]),
    StreamTV = length(customerID[StreamingTV =="Yes"]),
    Non.StreamTV = length(customerID[StreamingTV =="No"]),
    StreamMov = length(customerID[StreamingMovies =="Yes"]),
    Non.StreamMov = length(customerID[StreamingMovies =="No"]),
    Monthly = length(customerID[Contract == "Month-to-month"]),
    Yearly = length(customerID[Contract == "One year"]),
    Two.yearly = length(customerID[Contract == "Two year"]),
    Paperless = length(customerID[PaperlessBilling == "No"]),
    Non.Paperless = length(customerID[PaperlessBilling == "Yes"]),
    Bank.Payment = length(customerID[PaymentMethod == "Bank transfer (automatic)"]),
    Card.Payment = length(customerID[PaymentMethod == "Credit card (automatic)"]),
    Check.Payment = length(customerID[PaymentMethod == "Electronic check"]),
    Email.Check.Payment = length(customerID[PaymentMethod == "Mailed check"])
  )

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# CONVERT DATA FROM WIDE FORMAT TO LONG FORMAT
# using gather() function
# Diubah ke long format untuk mempermudah
# perhitungan dan meringkas data.
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
churn.customer <- gather(churn.customer, "Factor", "Customer", 2:37)


#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# DATA SUMMARY
# Calculate churn percentage of each factor
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

churn.summary <- churn.customer %>% 
  group_by(Factor) %>% 
  summarise(customer = sum(Customer), 
            churn = sum(Customer[Churn == "Yes"]) / sum(Customer) * 100) %>% 
  arrange(desc(churn))

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# CUSTOMIZE THEME
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

theme <-
  theme(text = element_text(family = "Verdana", color = "#444444")) +
  theme(plot.title = element_text(size = 24)) +
  theme(plot.subtitle = element_text(size = 18)) +
  theme(axis.title = element_text(size = 14)) +
  theme(axis.title.y = element_text(angle = 0, vjust = .5, margin = margin(r = 15))) +
  theme(axis.text = element_text(size = 10)) +
  theme(axis.title.x = element_text(margin = margin(t = 20))) +
  theme(legend.title = element_blank())

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# DASHBOARD TITLE
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

header <- dashboardHeader(
    title = HTML(paste(icon("cubes"), "CHURNDashboard"))
  )

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# DASHBOARD MENU
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

sidebar <- dashboardSidebar(
  sidebarMenu(id = "tabs", 
              menuItem("Customer",
                       tabName = "customer", 
                       icon = icon("address-book")
              )
  )
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# TOTAL CUSTOMER INFORMATION BOX
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
info.1 <- valueBox(
  value = length(data$customerID),
  subtitle = "total customer", 
  icon = icon("users"), width = 3
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# TOTAL REVENUE INFORMATION BOX 
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

info.2 <- valueBox(
  value = formatC(sum(data$TotalCharges, na.rm = "yes")/1000000, 
                  big.mark = ".", decimal.mark = ",", 
                  format = "f", digits = 2),
  subtitle = "total revenue ($million)", 
  icon = icon("money"), width = 3
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# TOTAL CUSTOMER CHURN INFORMATION BOX
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

info.3 <- valueBox(
  value = length(data$customerID[data$Churn == "Yes"]),
  subtitle = "churn customer",
  icon = icon("user-times"), width = 3
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# CHURN CUSTOMER PERCENTAGE INFORMATION BOX
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

info.4 <- valueBox(
  value = formatC(length(data$customerID[data$Churn == "Yes"]) /
                    length(data$customerID) * 100, big.mark = ".", 
                  decimal.mark = ",", format = "f", digits = 2),
  subtitle = "churn percentage (%)",
  icon = icon("line-chart"), width = 3
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# INTERNET SERVICE FACTOR CHART
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

chart.box.1 <- box(
  title = "Internet Service Factor",
  solidHeader = TRUE,
  radioButtons(
    inputId = "input1",
    label = "Churn?",
    choices = c("Yes" = "Yes", "No" = "No"),
    inline = TRUE
  ),
  plotOutput("chart1", height = "150px"),
  width = 6,
  status = "primary"
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# SUBSCRIPTION FACTOR CHART 
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

chart.box.2 <- box(
  title = "Subscription Factor",
  solidHeader = TRUE,
  radioButtons(
    inputId = "input2",
    label = "Churn?",
    choices = c("Yes" = "Yes", "No" = "No"),
    inline = TRUE
  ),
  plotOutput("chart2", height = "150px"),
  width = 6,
  status = "primary"
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# CHURN ANALYSIS INFORMATION CHART 
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

box.analysis <- box(
  title = "Churn Analysis",
  solidHeader = TRUE,
  plotOutput("chart.analysis", height = "750px"),
  width = 12,
  status = "primary"
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# DASHBOARD BODY CONTENT
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

body <- dashboardBody(
  tabItems(
    tabItem(tabName = "customer",
            fluidRow(info.1, info.2, info.3, info.4, 
                     chart.box.1, chart.box.2, box.analysis))
  )
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# COMBINE ALL VISUAL DASHBOARD ELEMENT 
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ui <- dashboardPage(header, sidebar, body)
  
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# INPUT OUTPUT MAPPING
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

server <- function(input, output) {

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# INTERNET SERVICE INTERACTIVE CHART
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

output$chart1 <- renderPlot({
    data %>%
      group_by(InternetService) %>%
      filter(Churn == input$input1) %>%
      summarise(Number.of.Customer = n()) %>%
      ggplot(aes(y = Number.of.Customer, x = InternetService)) +
      geom_bar(stat = "identity", fill = "#0072B2") +
      geom_text(aes(label = Number.of.Customer), hjust = 1.1, color = "white") +
      coord_flip() + 
      labs(y = "Number of Customer", x = NULL) +
      theme
  })

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# GRAFIK INTERAKTIF FAKTOR KONTRAK LANGGANAN
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

output$chart2 <- renderPlot({
  data %>%
    group_by(Contract) %>%
    filter(Churn == input$input2) %>%
    summarise(Number.of.Customer = n()) %>%
    ggplot(aes(y = Number.of.Customer, x = Contract)) +
    geom_bar(stat = "identity", fill = "#0072B2") +
    geom_text(aes(label = Number.of.Customer), hjust = 1.1, color = "white") +
    coord_flip() + 
    labs(y = "Number of Customer", x = NULL) +
    theme
})

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# GRAFIK ANALISIS FAKTOR CHURN
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

output$chart.analysis <- renderPlot({
  churn.summary %>% 
    ggplot(aes(y = churn, x = reorder(Factor, churn))) + 
    geom_bar(stat = "identity", fill = "#0072B2") + 
    geom_text(aes(label = round(churn, 1)), hjust = 1.1, color = "white") + 
    coord_flip() + ggtitle("Churn Factor") + 
    labs(y = "Churn Percentage", x = NULL) + 
    theme
  
})

}

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
# MENGGABUNGKAN ELEMEN UI DAN SERVER
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

shinyApp(ui = ui, server = server)

Click “Run App” button at the right top of window script to run this application or type runApp(“project_name”) in CONSOLE.

Step#6: Publish at shinyapps.io

You can also publish and deploy your shiny app on the web at shinyapps.io.

Follow these steps:

  • Install rsconnect by typing install.packages(“rsconnect”) at your RStudio CONSOLE.
  • Create account at shinyapps.io.
  • Navigate to Account menu > Tokens, click show.
  • Copy and paste your code at your RStudio CONSOLE.
  • Type rsconnect::deployApp() at CONSOLE.

After few minutes of uploading files and data, your app is ready on the web.

You are able to access the result of this guide at Churn Dashboard.

If you are interested in data analysis, you can access Data Analysis Mastery Crash Course as well.

Comments

comments powered by Disqus