Building Shiny App exercises part 4

APPLICATION LAYOUT & REACTIVITY
The fourth part of our series is “separated” into two “sub-parts”. In the first one we will start building the skeleton of our application by using tabsetPanel. This is how we will separate the sections of our app and also organize its structure better.
In the second part you will learn hot to load your dataset in RStudio and finally in the third one we will give life to your Shiny App! Specifically, you are going to have your first contact with reactivity and learn how to build reactive output to display in your Shiny app in a form of a data table initially.
Follow the examples below to understand the logic of the tools you are going to use and then enhance the app you started creating in part 1 by practising with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

TABSET PANEL
In the example below you will see hot to add a tabsetPanel in your shiny app.

# ui.R
library(shiny)
fluidPage(
titlePanel("TabPanel"),
sidebarLayout(
sidebarPanel(h3("Menu")),
mainPanel(h3("Main Panel"),tabsetPanel(type = "tabs"))
))

#server.R
library(shiny)
shinyServer(function(input, output) {
})

Exercise 1

Add a tabsetPanel to the mainPanel of your Shiny App.

TAB PANEL
In the example below you will see how to add tabPanel in your tabsetPanel.

# ui.R
library(shiny)
fluidPage(
titlePanel("TabPanel"),
sidebarLayout(
sidebarPanel(h3("Menu")),
mainPanel(h3("Main Panel"),tabsetPanel(type = "tabs",
tabPanel("Tab Panel 1")
))))

#server.R
library(shiny)
shinyServer(function(input, output) {
})

Exercise 2

Place a tabPanel in the tabsetPanel you just added to your Shiny App. Name it “Data Table”.

Exercise 3

Put a second tabPanel next to the first one. Name it “Summary”.

LOAD DATASET
Now it is time to give your app a purpose of existence. This can happen with only one way. To add some data into it! As we told in part 1 we will create an application based on the famous (Fisher’s or Anderson’s) iris data set which gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica.
This is a “built in” dataset of RStudio that will help us create our first application.
But normally you want to analyze your own datasets. The first thing you should do in order to perform any kind of analysis on them is to load them properly. We will now see how to load a dataset in txt form from a local file using RStudio. Let’s go!
The process is quite simple. First of all you have to place the txt file that contains your dataset into the same directory that you are working, secondly press the “Import Dataset” button in RStudio and then “From Local File…”. Find the txt file in your computer and click “Open”, then press “Import”. That’s all! Your dataset is properly loaded in your directory and now you can work with it.
Please note that the purpose of this series is not to teach how to form your dataset before you load it nor how to “clean” it. You can gain more information about this subject from here. Our purpose is to teach you build your first Shiny App.

Exercise 4

Load the dataset you want to analyze (“something.txt”) from your computer to your directory with RStudio buttons.

INTRODUCTION TO REACTIVITY
From this point you are going to enter in the “Kingdom of Reactivity”. Reactive output automatically responds when your user interacts with a widget. You can create reactive output by following two steps. Firstly, add an R object to your ui.R. and then tell Shiny how to build the object in server.R.

1): Add an R object to the UI

Shiny provides a variety of functions that transform R objects into output for your UI as you can see below:

htmlOutput: raw HTML
imageOutput: image
plotOutput: plot
tableOutput: table
textOutput: text
uiOutput: raw HTML
verbatimTextOutput: text

To add output to the UI place the output function inside sidebarPanel or mainPanel in the ui.R script.
For example, the ui.R file below uses tableOutput to add a reactive line of text to “Tab Panel 1”. Nothing happens…for the moment!

# ui.R
library(shiny)
fluidPage(
titlePanel("TabPanel"),
sidebarLayout(
sidebarPanel(h3("Menu")),
mainPanel(h3("Main Panel"),tabsetPanel(type = "tabs",
tabPanel("Tab Panel 1",dataTableOutput("dt1")),
tabPanel("Tab Panel 2"))
)))

#server.R
library(shiny)
shinyServer(function(input, output) {
})

Notice that datatableOutput takes an argument, the character string “dt1”. Each of the *Output functions require a character string that Shiny will use as the name of your reactive element. Users cannot see it and you will understand its role later.

Exercise 5

Add a datatableOutput to “Data Table”, name its argument “Table”.

2): Provide R code to build the object.

The code should be placed in the function that appears inside shinyServer in your server.R script.
This function is of great importance as it builds a list-like object named output that contains all of the code needed to update the R objects in your app. Be careful, each R object MUST have its own entry in the list.
You can create an entry by defining a new element for output within the function. The element name should match the name of the reactive element that you created in ui.R.
Each entry should contain the output of one of Shiny’s render* functions. Each render* function corresponds to a specific type of reactive object. You can find them below:

renderImage: images (saved as a link to a source file)
renderPlot: plots
renderPrint: any printed output
renderTable: data frame, matrix, other table like structures
renderText: character strings
renderUI: a Shiny tag object or HTML

Each render* function takes a single argument: an R expression which can either be one simple line of text, or it can involve many lines of code.
In the example below “dt1” is attached to the output expression in server.R and gives us the Data Table of “iris” dataset inside “Tab Panel 1”.

# ui.R
library(shiny)
fluidPage(
titlePanel("TabPanel"),
sidebarLayout(
sidebarPanel(h3("Menu")),
mainPanel(h3("Main Panel"),tabsetPanel(type = "tabs",
tabPanel("Tab Panel 1",dataTableOutput("dt1")),
tabPanel("Tab Panel 2"))
)))

#server.R
library(shiny)
shinyServer(function(input, output) {
output$dt1 <- renderDataTable(
iris)

})

Exercise 6

Add the appropriate render* function to server.R in order to create the Data table of the “iris” dataset. Hint: Use the output expression.

The dataTableOutput is your first contact with reactivity, in the next parts of our series you will use the rest of the Output functions that Shiny provides. But for now let’s experiment a little bit on this.
As you can see there is a text filter in your Data Table. You can deactivate it by setting searching to be “FALSE” as the example below.

# ui.R
library(shiny)
fluidPage(
titlePanel("TabPanel"),
sidebarLayout(
sidebarPanel(h3("Menu")),
mainPanel(h3("Main Panel"),tabsetPanel(type = "tabs",
tabPanel("Tab Panel 1",dataTableOutput("dt1")),
tabPanel("Tab Panel 2"))
)))

#server.R
library(shiny)
shinyServer(function(input, output) {
output$dt1 <- renderDataTable(
iris,options = list(searching=FALSE))
})

Exercise 7

Disable the Text Filter of your Data Table. Hint: Use options, list and searching.

With the same logic you can disable the pagination that is displayed in your Data Table, as in the example below.

# ui.R

library(shiny)
fluidPage(
titlePanel("TabPanel"),
sidebarLayout(
sidebarPanel(h3("Menu")),
mainPanel(h3("Main Panel"),tabsetPanel(type = "tabs",
tabPanel("Tab Panel 1",dataTableOutput("dt1")),
tabPanel("Tab Panel 2"))
)))

#server.R
library(shiny)
shinyServer(function(input, output) {
output$dt1 <- renderDataTable(
iris,options = list(searching=FALSE,paging=FALSE))
})

Exercise 8

Disable the Pagination of your Data Table. Hint: Use options, list, paging.
Now you can see how to display an exact number of rows (15) and enable filtering again.

# ui.R

library(shiny)
fluidPage(
titlePanel("TabPanel"),
sidebarLayout(
sidebarPanel(h3("Menu")),
mainPanel(h3("Main Panel"),tabsetPanel(type = "tabs",
tabPanel("Tab Panel 1",dataTableOutput("dt1")),
tabPanel("Tab Panel 2"))
)))

#server.R
library(shiny)
shinyServer(function(input, output) {
output$dt1 <- renderDataTable(
iris,options = list(pageLength=15))
})

Exercise 9

Enable filtering again and set the exact number of rows that are displayed to 10. Hint: Use options, list, pageLength

We can also create a Length Menu in order to control totally the choices of the numbers of rows we want to be displayed. In the example below we assign every number to a menu label. 5 -> ‘5’, 10 -> ’10’, 15 -> ’15’,-1 -> ‘ALL’.

# ui.R
library(shiny)
fluidPage(
titlePanel("TabPanel"),
sidebarLayout(
sidebarPanel(h3("Menu")),
mainPanel(h3("Main Panel"),tabsetPanel(type = "tabs",
tabPanel("Tab Panel 1",dataTableOutput("dt1")),
tabPanel("Tab Panel 2"))
)))

#server.R
library(shiny)
shinyServer(function(input, output) {
output$dt1 <- renderDataTable(
iris,options = list(
lengthMenu = list(c(5, 15, 25,-1),c('5','15','25','ALL')),
pageLength = 15))
})

Exercise 10

Create a Length Menu with values (10,20,30,-1) and assign each one ot the values to the appropriate menu label. Hint: Use options, list, lengthMenu,pageLength.




Building Shiny App solutions part 4

Below are the solutions to these exercises on Building Shiny App.

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

####################
#                  #
#    Exercise 1    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radio", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2),
                                     selected = 2))),
                 fluidRow(
                   column(6,
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2)),

                 column(6,
                        selectInput("select", label = h4("Select Box"),
                                    choices = list("Choice 1" = 1, "Choice 2" = 2
                                                  ), selected = 1))),
                 fluidRow(
                   column(6,
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01")),
                 column(6,
                        sliderInput("slider1", label = h4("Sliders"),
                                    min = 0, max = 100, value = c(10,90)))),
                 fluidRow(
                   column(6,
                 dateRangeInput("dates", label = h4("Date Range"))),
                 column(6,
                        textInput("text", label = h4("Text Input"),
                                  value = "Some Text"))),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis"),
              tabsetPanel(type="tabs")

    )
  )
  ))

####################
#                  #
#    Exercise 2    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radio", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2),
                                     selected = 2))),
                 fluidRow(
                   column(6,
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2)),

                 column(6,
                        selectInput("select", label = h4("Select Box"),
                                    choices = list("Choice 1" = 1, "Choice 2" = 2
                                                  ), selected = 1))),
                 fluidRow(
                   column(6,
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01")),
                 column(6,
                        sliderInput("slider1", label = h4("Sliders"),
                                    min = 0, max = 100, value = c(10,90)))),
                 fluidRow(
                   column(6,
                 dateRangeInput("dates", label = h4("Date Range"))),
                 column(6,
                        textInput("text", label = h4("Text Input"),
                                  value = "Some Text"))),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis"),
              tabsetPanel(type="tabs",tabPanel("Data Table"))

    )
  )
  ))

####################
#                  #
#    Exercise 3    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radio", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2),
                                     selected = 2))),
                 fluidRow(
                   column(6,
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2)),

                 column(6,
                        selectInput("select", label = h4("Select Box"),
                                    choices = list("Choice 1" = 1, "Choice 2" = 2
                                                  ), selected = 1))),
                 fluidRow(
                   column(6,
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01")),
                 column(6,
                        sliderInput("slider1", label = h4("Sliders"),
                                    min = 0, max = 100, value = c(10,90)))),
                 fluidRow(
                   column(6,
                 dateRangeInput("dates", label = h4("Date Range"))),
                 column(6,
                        textInput("text", label = h4("Text Input"),
                                  value = "Some Text"))),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis"),
              tabsetPanel(type="tabs",tabPanel("Data Table"),tabPanel("Summary"))

    )
  )
  ))

####################
#                  #
#    Exercise 4    #
#                  #
####################

#Place your .txt file in the same directory that you are working -> "Import Dataset" -> "From Local File..." -> "Open" -> "Import"

####################
#                  #
#    Exercise 5    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radio", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2),
                                     selected = 2))),
                 fluidRow(
                   column(6,
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2)),

                 column(6,
                        selectInput("select", label = h4("Select Box"),
                                    choices = list("Choice 1" = 1, "Choice 2" = 2
                                                  ), selected = 1))),
                 fluidRow(
                   column(6,
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01")),
                 column(6,
                        sliderInput("slider1", label = h4("Sliders"),
                                    min = 0, max = 100, value = c(10,90)))),
                 fluidRow(
                   column(6,
                 dateRangeInput("dates", label = h4("Date Range"))),
                 column(6,
                        textInput("text", label = h4("Text Input"),
                                  value = "Some Text"))),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis"),
              tabsetPanel(type="tabs",tabPanel("Data Table",dataTableOutput("Table")),
                                      tabPanel("Summary"))

    )
  )
  ))

####################
#                  #
#    Exercise 6    #
#                  #
####################

#server.R
shinyServer(function(input, output) {
  output$Table <- renderDataTable(
    iris)
})

####################
#                  #
#    Exercise 7    #
#                  #
####################

#server.R
shinyServer(function(input, output) {
  output$Table <- renderDataTable(
    iris,options = list(searching=FALSE))
})

####################
#                  #
#    Exercise 8    #
#                  #
####################

#server.R
shinyServer(function(input, output) {
  output$Table <- renderDataTable(
    iris,options = list(searching=FALSE,paging=FALSE))
})

####################
#                  #
#    Exercise 9    #
#                  #
####################

#server.R
shinyServer(function(input, output) {
  output$Table <- renderDataTable(
    iris,options = list(pageLength=10))
})

####################
#                  #
#    Exercise 10   #
#                  #
####################

#server.R
shinyServer(function(input, output) {
  output$Table <- renderDataTable(
    iris,options = list(
      lengthMenu = list(c(10, 20, 30,-1),c('10','20','30','ALL')),
      pageLength = 10))
})



Building Shiny App exercises part 3

ADD CONTROL WIDGETS
Welcome to the third part of our series. In this part you will learn how to build and place inside your app the rest of the widgets which were mentioned in part 2.
More specifically we will analyze: 1) helptext, 2) numericInput, 3) radioButtons, 4) selectInput, 5) sliderInput and 6) textInput.
As you already know from part 2 reactivity will be added in the upcoming parts of our series so this is something that you do not have to worry about.
Follow the examples below to understand the logic behind the widgets’ functions and then enhance the app you created in part 1 by practising with the exercise set we prepared for you.
Firstly, we will add all the kinds of the widgets in our app, for educational reasons and later we will decide which of them is practical to keep.Let’s start!

Answers to the exercises are available here.

If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.

To begin with let’s create the space inside our sidebarPanel in order to put in there the rest of our widgets.

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

Exercise 1

Use the function fluidrow to make sure that all the elements we are going to use will be in the same line. To do this put fluidrow just under the “Menu” in your sidebarPanel and close its parenthesis just before the submibutton (excluding the two br).

HELP TEXT

In the example below we create a UI with a helpText.
# ui.R
shinyUI(fluidPage(
titlePanel("Widgets"),
h3("Help Text"),
helpText("Text that is used to provide some extra details to the user.")))

# server.R
shinyServer(function(input, output) {
})

Exercise 2

Place a helpText exactly under the actionButton, name it “Help Text” and as text add:”For help”. Hint: Use h4.

Exercise 3

Now use column function in order to decide the column width for every row and put the two widgets in the same line. To do this place the column function twice. Firstly place it just before the “Actionbutton” title with width = 6 and close its parenthesis exactly after the label “Perform”. Do the same for the helpInput. Both of the column functions must be inside the same fluidrow.

NUMERIC INPUT

In the example below we create a UI with a numericInput.
# ui.R
shinyUI(fluidPage(
titlePanel("Widgets"),
numericInput("num",
label = h3("Numeric Input"),
value = 1)
))

# server.R
shinyServer(function(input, output) {
})

Exercise 4

Put a numericInput under helpText,in the same row with submitButton. Name it “numer”, give it “Numeric Input” as label and value = 10. Hint: Use h4, fluidrow and column.

RADIO BUTTONS

In the example below we create a UI with a radioButtons.
#ui.R
shinyUI(fluidPage(
titlePanel("Widgets"),
radioButtons("radio", label = h3("Radio buttons"),
choices = list("Choice 1" = 1, "Choice 2" = 2,
"Choice 3" = 3),selected = 1)
))

#server.R
shinyServer(function(input, output) {
})

Exercise 5

Add radioButtons under numericInput, in the same row with checkBoxInput. Name it “radiobuttons”, put as label “Radio Buttons” and give it two choices with no default. Hint: Use h4, fluidrow, column and choices.

Exercise 6

Now put “2” as the default of the choices. Hint: Use selected.

SELECT INPUT

In the example below we create a UI with a selectInput.
# ui.R
shinyUI(fluidPage(
titlePanel("Widgets"),
selectInput("select", label = h3("Select Box"),
choices = list("Choice 1" = 1, "Choice 2" = 2,
"Choice 3" = 3), selected = 1)
))

#server.R
shinyServer(function(input, output) {
})

Exercise 7
Place under radiobuttons and in the same row with checkBoxGroupInput a selectinput. Its name should be “select”, its label “Select Box” and you should give it two choices with the second one as default. Hint: Use h4, fluidrow, column, choices and selected.

SLIDER INPUT

In the example below we create a UI with two sliderInput.
# ui.R
shinyUI(fluidPage(
titlePanel("Widgets"),
sliderInput("slider1", label = h3("Sliders"),
min = 0, max = 10, value = 5),
sliderInput("slider2", "",
min = 0, max = 10, value = c(3, 7))
))

#server.R
shinyServer(function(input, output) {
})

Exercise 8

Under the selectInput and in the same row with the dateInput place a sliderInput with name = slider1, label = “Sliders”, min = 0, max = 100 and value =50. Hint: Use fluidrow, columns and h4.

Exercise 9

Replace the value with a default range “10-90” and see the difference.

TEXT INPUT

In the example below we create a UI with a textInput.
# ui.R
shinyUI(fluidPage(
titlePanel("Widgets"),
textInput("text", label = h3("Text Input"),
value = "Text..."))
)

#server.R
shinyServer(function(input, output) {
})

Exercise 10

Finally put a textInput under sliderInput and in the same row with the dateRangeInput. Name it “text”, put as label “Text Input” and as value “Some Text”. Hint: Use fluidrow, column and h4.




Building Shiny App solutions part 3

Below are the solutions to these exercises on Building Shiny App.

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

####################
#                  #
#    Exercise 1    #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE),
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2),
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01"),
                 dateRangeInput("dates", label = h4("Date Range")),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))

####################
#                  #
#    Exercise 2    #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform"),
                 h4("Help Text"),
                 helpText("Just for help")),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE),
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2),
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01"),
                 dateRangeInput("dates", label = h4("Date Range")),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))

####################
#                  #
#    Exercise 3    #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE),
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2),
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01"),
                 dateRangeInput("dates", label = h4("Date Range")),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))

####################
#                  #
#    Exercise 4    #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE),
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2),
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01"),
                 dateRangeInput("dates", label = h4("Date Range")),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))

####################
#                  #
#    Exercise 5    #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radiobuttons", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2)
                                     ))),
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2),
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01"),
                 dateRangeInput("dates", label = h4("Date Range")),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))

####################
#                  #
#    Exercise 6    #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radio", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2),
                                     selected = 2))),
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2),
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01"),
                 dateRangeInput("dates", label = h4("Date Range")),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))

####################
#                  #
#    Exercise 7    #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radio", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2),
                                     selected = 2))),
                 fluidRow(
                   column(6,
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2)),
                 column(6,
                        selectInput("select", label = h4("Select Box"),
                                    choices = list("Choice 1" = 1, "Choice 2" = 2
                                                  ), selected = 1))),
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01"),
                 dateRangeInput("dates", label = h4("Date Range")),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))

####################
#                  #
#    Exercise 8    #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radio", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2),
                                     selected = 2))),
                 fluidRow(
                   column(6,
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2)),

                 column(6,
                        selectInput("select", label = h4("Select Box"),
                                    choices = list("Choice 1" = 1, "Choice 2" = 2
                                                  ), selected = 1))),
                 fluidRow(
                   column(6,
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01")),
                 column(6,
                        sliderInput("slider1", label = h4("Sliders"),
                                    min = 0, max = 100, value = 50))),
                 dateRangeInput("dates", label = h4("Date Range")),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))

####################
#                  #
#    Exercise 9    #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radio", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2),
                                     selected = 2))),
                 fluidRow(
                   column(6,
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2)),

                 column(6,
                        selectInput("select", label = h4("Select Box"),
                                    choices = list("Choice 1" = 1, "Choice 2" = 2
                                                  ), selected = 1))),
                 fluidRow(
                   column(6,
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01")),
                 column(6,
                        sliderInput("slider1", label = h4("Sliders"),
                                    min = 0, max = 100, value = c(10,90)))),
                 dateRangeInput("dates", label = h4("Date Range")),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))

####################
#                  #
#    Exercise 10   #
#                  #
####################

# ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")),
                   column(6,
                 h4("Help Text"),
                 helpText("Just for help"))),
                 br(),
                 fluidRow(
                   column(6,
                 h4("Submitbutton"),
                 submitButton("Submit")),
                 column(6,
                        numericInput("numer",
                                     label = h4("Numeric Input"),
                                     value = 10))),
                 fluidRow(
                   column(6,
                 h4("Single Checkbox"),
                 checkboxInput("checkbox", label = "Choice A", value = TRUE)),
                 column(6,
                        radioButtons("radio", label = h4("Radio Buttons"),
                                     choices = list("Choice 1" = 1, "Choice 2" = 2),
                                     selected = 2))),
                 fluidRow(
                   column(6,
                 checkboxGroupInput("checkGroup",
                                    label = h4("Checkbox group"),
                                    choices = list("Choice 1" = 1,
                                                   "Choice 2" = 2, "Choice 3" = 3),
                                    selected = 2)),

                 column(6,
                        selectInput("select", label = h4("Select Box"),
                                    choices = list("Choice 1" = 1, "Choice 2" = 2
                                                  ), selected = 1))),
                 fluidRow(
                   column(6,
                 dateInput("date",
                           label = h4("Date input"),
                           value = "2016-12-01")),
                 column(6,
                        sliderInput("slider1", label = h4("Sliders"),
                                    min = 0, max = 100, value = c(10,90)))),
                 fluidRow(
                   column(6,
                 dateRangeInput("dates", label = h4("Date Range"))),
                 column(6,
                        textInput("text", label = h4("Text Input"),
                                  value = "Some Text"))),
                 fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

    )
  )
  ))



Building Shiny App exercises part 2

ADD CONTROL WIDGETS
In the second part of our series you will see how to add control widgets in your Shiny app. Widget is a web element that your users can interact with. The widgets provided by Shiny are:

FUNCTIONS
actionButton: Action Button
checkboxGroupInput: A group of check boxes
checkboxInput: A single check box
dateInput: A calendar for date selection
dateRangeInput: A pair of calendars for selecting a date range
fileInput: A file upload control wizard
helpText: Help text that can be added to an input form
numericInput: A field to enter numbers
radioButtons: A set of radio buttons
selectInput: A box with choices to select from
sliderInput: A slider bar
submitButton: A submit button
textInput: A field to enter text

ADDING WIDGETS
You can add widgets to your web page in the same way that you added other types of HTML content in part 1.
To add a widget to your app, place a widget function in sidebarPanel or in mainPanel in your ui.R file.
The first two arguments for each widget are a name for the widget which will be a character string that the user will not see, but you can use it to change the widget’s value and a label which will appear with the widget in your app and it should be a character string too.
The rest of the arguments vary from widget to widget, depending on what the widget needs to be functional. They may be initial values, ranges, and increments.
Follow the examples below to understand the logic behind the widgets’ functions and then enhance the app you created in part 1 by practising with the exercise set we prepared for you.
Firstly, we will add all the kinds of the widgets to our app, for educational reasons and later we will decide which of them is practical to keep.
Note that we will just add the buttons in this part. Reactivity will be added to them in a few chapters. Lets begin!

Answers to the exercises are available here.

If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

Exercise 1

Open the app you created in part 1 and move the image from sidebarPanel to mainPanel, leave two rows under the title “Main”, put the image there and change its dimensions to: height = 150 and width = 200. HINT: Use br.

BUTTONS
In the example below we create a UI with a submitButton and an actionButton. Please note that we use the function fluidrow to make sure that all the elements we are going to use will be in the same line as we are going to need this in the next parts:
# ui.R
shinyUI(fluidPage(
titlePanel(“Widgets”),

fluidRow(h3(“Buttons”),
actionButton(“action”, label = “Action”),
br(),
br(),
submitButton(“Submit”))))

# server.R
shinyServer(function(input, output) {
})

Exercise 2

Leave a row and place an actionButton under the title “Menu” in sidebarPanel, give it the title “Actionbutton”, name = “per” and label = “Perform”. HINT: Use br and h4.

Exercise 3

Leave a row from the actionButton you just placed and add a submitButton with title = “Submitbutton” and name = “Submit”. HINT: Use br and h4.

SINGLE CHECKBOX
In the example below we create a UI with a single Checkbox:
# ui.R
shinyUI(fluidPage(
titlePanel(“Widgets”),

fluidRow(h3(“Single checkbox”),
checkboxInput(“checkbox”, label = “Choice A”, value = TRUE))))

#server.R
shinyServer(function(input, output) {
})

Exercise 4

Add a checkboxInput in the sidebarPanel under the submitButton, put as title “Single Checkbox”, name it “checbox”, name the label “Choice A” and set the value to “TRUE”. HINT: Use h4.

Exercise 5

Change the value to “FALSE” to understand the difference.

CHECKBOX GROUP
In the example below we create a UI with a Checkbox Group:
#ui.R
shinyUI(fluidPage(
checkboxGroupInput(“checkGroup”,
label = h3(“Checkbox group”),
choices = list(“Choice 1” = 1,
“Choice 2” = 2, “Choice 3” = 3),
selected = 2)
))

#server.R
shinyServer(function(input, output) {
})

Exercise 6

Place a checkboxGroupInput under the checkboxInput, give it title “Checkbox Group”, name it “checkGroup”, name the label “Checkbox Group” and give it 3 choices. HINT: Use h4

Exercise 7

Make the second of the choicesthe default one.

DATE INPUT
In the example below we create a UI with a Date Input:
#ui.R
shinyUI(fluidPage(
dateInput(“date”,
label = h3(“Date input”),
value = “2016-12-07”)
))

#server.R
shinyServer(function(input, output) {
})

Exercise 8

Under the checkboxGroupInput add a dateInput with name = “date”, label = “Date Input” and value = “2016-12-01”.

DATE RANGE
In the example below we create a UI with a Date Range Input:
#ui.R
shinyUI(fluidPage(
dateRangeInput(“dates”, label = h3(“Date range”))
))

#server.R
shinyServer(function(input, output) {
})

Exercise 9

Under the dateInput place a dateRangeInput with name = “dates” and label = “Date Range”. HINT: Use h4.

FILE INPUT
In the example below we create a UI with a File Input.
#ui.R
shinyUI(fluidPage(
fileInput(“file”, label = h3(“File input”))
))

#server.R
shinyServer(function(input, output) {
})

Exercise 10

Under the dateRangeInput place a fileInput. Name it “file” and give it the label “File Input”.




Building Shiny App solutions part 2

Below are the solutions to these exercises on Building Shiny App.

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

####################
#                  #
#    Exercise 1    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu")
                ),
    mainPanel(h1("Main"),
              br(),
              br(),
              img(src = "petal.jpg", height = 150, width = 200),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")
                )
)))

####################
#                  #
#    Exercise 2    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform")
                ),

    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")
                )
)))

####################
#                  #
#    Exercise 3    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform"),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit")
                ),

    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")
                )
)))

####################
#                  #
#    Exercise 4    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform"),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                checkboxInput("checkbox", label = "Choice A", value = TRUE)
                ),

    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

  )
)))

####################
#                  #
#    Exercise 5    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform"),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                checkboxInput("checkbox", label = "Choice A", value = FALSE)
                ),

    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

  )
)))

####################
#                  #
#    Exercise 6    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform"),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                checkboxInput("checkbox", label = "Choice A", value = TRUE),
                checkboxGroupInput("checkGroup",
                                   label = h4("Checkbox group"),
                                   choices = list("Choice 1" = 1,
                                                  "Choice 2" = 2, "Choice 3" = 3)
                                   )),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

  )
)))

####################
#                  #
#    Exercise 7    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform"),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                checkboxInput("checkbox", label = "Choice A", value = TRUE),
                checkboxGroupInput("checkGroup",
                                   label = h4("Checkbox group"),
                                   choices = list("Choice 1" = 1,
                                                  "Choice 2" = 2, "Choice 3" = 3),
                                   selected = 2)),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

  )
)))

####################
#                  #
#    Exercise 8    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform"),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                checkboxInput("checkbox", label = "Choice A", value = TRUE),
                checkboxGroupInput("checkGroup",
                                   label = h4("Checkbox group"),
                                   choices = list("Choice 1" = 1,
                                                  "Choice 2" = 2, "Choice 3" = 3),
                                   selected = 2),
                dateInput("date",
                          label = h4("Date input"),
                          value = "2016-12-01")),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

  )
)))

####################
#                  #
#    Exercise 9    #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform"),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                checkboxInput("checkbox", label = "Choice A", value = TRUE),
                checkboxGroupInput("checkGroup",
                                   label = h4("Checkbox group"),
                                   choices = list("Choice 1" = 1,
                                                  "Choice 2" = 2, "Choice 3" = 3),
                                   selected = 2),
                dateInput("date",
                          label = h4("Date input"),
                          value = "2016-12-01"),
                dateRangeInput("dates", label = h4("Date Range"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

  )
)))

####################
#                  #
#    Exercise 10   #
#                  #
####################

#ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 br(),
                 h4("Actionbutton"),
                 actionButton("per", label = "Perform"),
                 br(),
                 h4("Submitbutton"),
                 submitButton("Submit"),
                 h4("Single Checkbox"),
                checkboxInput("checkbox", label = "Choice A", value = TRUE),
                checkboxGroupInput("checkGroup",
                                   label = h4("Checkbox group"),
                                   choices = list("Choice 1" = 1,
                                                  "Choice 2" = 2, "Choice 3" = 3),
                                   selected = 2),
                dateInput("date",
                          label = h4("Date input"),
                          value = "2016-12-01"),
                dateRangeInput("dates", label = h4("Date Range")),
                fileInput("file", label = h4("File Input"))),
    mainPanel(h1("Main"),
              img(src = "petal.jpg", height = 150, width = 200),
              br(),
              br(),
              p("This famous (Fisher's or Anderson's) ", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

  )
)))



Building Shiny App exercises part 1

INTRODUCTION TO SHINY
Shiny is a package from RStudio that can be used to build interactive web pages with RStudio which is is an open source set of integrated tools designed to help you be more productive with R and you can download it from here. Use the examples in this tutorial to “take a first bite” and prepare for the exercises that follow and will help you build your first Shiny Application from “zero point”. This is the first part of the series and we will just create the interface, make some HTML formatting and add an image to our application. Specifically we will start creating a Shiny Application that will analyze the famous (Fisher’s or Anderson’s) iris data set which gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica. Lets go!
BUILDING INTERFACE (UI)
Every Shiny application includes two parts: a web page which shows the app to the user (UI), and a computer that activates the app (server). You need to create these two parts. UI is just a web document that the user gets to see and is responsible for creating the layout of the app and telling Shiny exactly where things go. The server is responsible for the logic of the app.
You can create a Shiny app by making a new directory and saving a ui.R and server.R file inside it. Each app will need its own unique directory.
You can run a Shiny app by giving the name of its directory to the function runApp(). For example if your Shiny app is in a directory called “Shiny App”, run it with the following code:

library(shiny)
runApp("Shiny App")

Or by just clicking the “Run App” button at the top of the editor which is the safest solution.

Answers to the exercises are available here.

If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

Exercise 1

Create a new directory named “Shiny App” in your working directory.

Exercise 2

Create the ui.r and server.r files.

Secondly, we have to install the “Shiny” package with:

install.packages("shiny")

and then we will call it with:

library(shiny)

Now that we analyzed the structure of a Shiny app, we will show you how to build a user-interface for this.
To get started, we open the server.R and ui.R files and edit them like this:
#ui.R
shinyUI(fluidPage())
#server.R
shinyServer(function(input, output) {})
The result is an empty app with a blank user-interface, just to begin with.

Exercise 3

Create an empty app with a blank user-interface.

LAYOUT
Shiny ui.R scripts use the function fluidPage() to create a display that automatically adjusts to the dimensions of your user’s browser window. You lay out your app by placing elements in the fluidPage() function.
For example, the ui.R script below creates a user-interface that has a title panel and then a sidebar layout, which includes a sidebar panel and a main panel. Note that these elements are placed within the fluidPage() function.
#ui.R

shinyUI(fluidPage(
titlePanel("title panel"),
sidebarLayout(
sidebarPanel( "sidebar panel"),
mainPanel("main panel"))))

The TitlePanel() and sidebarLayout() are the two most used elements to add to fluidPage(). They create a basic Shiny app with a sidebar.
The sidebarLayout() always takes two arguments: sidebarPanel function output and mainPanel function output.

Exercise 4

Create titlePanel(), name it “Shiny App” and sidebarLayout(). Do not forget to add sidebarPanel() and mainPanel() inside this.

HTML Content
You can add content to your Shiny app by placing it inside a *Panel function.
HEADERS
To create a header element: select a header function e.g. (h1) and give it the text you want to see in the header.
For example, you can create a first level header that says “Title” with h1("Title").
To place the element in your app:
Put h1("Title") as an argument to titlePanel(), sidebarPanel(), or mainPanel().
The text will appear in the corresponding panel of your web page. You can place multiple elements in the same panel if you separate them with a comma.
#ui.R

shinyUI(fluidPage(
titlePanel("My Shiny App"),
sidebarLayout(
sidebarPanel(),
mainPanel(
h1("First level title"),
h2("Second level title")))))

Exercise 5

Create an HTML element to add the title “Menu” in the sidebarPanel() and “Main” in mainPanel() with one of Shiny’s tag functions. HINT: Use h1,h2.

FORMATTED TEXT
Shiny offers many tag functions for formatting text.Take a look:
p: A paragraph of text
h1: A first level header
h2: A second level header
a: A hyper link
br: A line break (e.g. a blank line)
div: A division of text with a uniform style
span: An in-line division of text with a uniform style
pre: Text ‘as is’ in a fixed width font
code: A formatted block of code
img: An image
strong: Bold text
em: Italicized text

Exercise 6

Add a paragraph in your mainPanel() with a description about the app you are going to make.”This famous (Fisher’s or Anderson’s) iris data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica.” Use an HTML tag format. HINT:Use p.

Exercise 7

Link the word “iris” in the mainPanel() with this hyperlink “http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html”. HINT: Use a.

Exercise 8

Add the title “Analysis” under the desciption paragraph of your mainPanel. Do not forget the comma separation. HINT: Use br and h2.

Exercise 9

Use bold text to the words “Iris setosa”,”versicolor” and “virginica”. HINT: Use strong.

IMAGES
Images can improve the appearance of your app and help users understand the content. Shiny uses img() function to put image files in your app. To insert an image, give the img() function the name of your image file as the src argument (e.g., img(src = "my_image.png")). You can also include other HTML parameters such as height and width. For example:

img(src = "my_image.png", height = 68, width = 68)
.
The img() function looks for your image file in a specific place. Your file must be in a folder named “www” in the same directory as the ui.R script. Shiny will share any file placed here with your user’s web browser, which makes “www” a great place to put images, style sheets, and other things the browser will need to build the web components of your Shiny app. So if you want to use an image named “something.png”, your Shiny App directory should look like this one:
#ui.R

shinyUI(fluidPage(
titlePanel("My Shiny App"),
sidebarLayout(
sidebarPanel(),
mainPanel(
img(src="something.png", height = 350, width = 350)))))

Exercise 10

Download this image and place it in a folder labeled “www” within your “Shiny App” directory. Name it “petal”, add .jpg extension and then call the img function inside the sidebarPanel(). Use height and width to decide its dimensions.




Building Shiny App solutions part 1

Below are the solutions to these exercises on Building Shiny App.

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

####################
#                  #
#    Exercise 1    # 
#                  #
####################

##File->New Project->New Directory->Empty Project->Directory Name:Shiny App->Create Project.

####################
#                  #
#    Exercise 2    #
#                  #
####################

##File -> New File -> RScript -> Save it as:ui.r
##File -> New File -> RScript -> Save it as:server.r

####################
#                  #
#    Exercise 3    #
#                  #
####################

##ui.R
library(shiny)
shinyUI(fluidPage(
))

##server.R
shinyServer(function(input, output) {
})

####################
#                  #
#    Exercise 4    #
#                  #
####################

##ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel( ),
    mainPanel()
  )
))

####################
#                  #
#    Exercise 5    #
#                  #
####################

##ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu") ),
    mainPanel(("Main"))
  )
))

####################
#                  #
#    Exercise 6    #
#                  #
####################

##ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu") ),
    mainPanel(h1("Main"),
              p("This famous (Fisher's or Anderson's) iris data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica. ")

  )
)))

####################
#                  #
#    Exercise 7    #
#                  #
####################

##ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu") ),
    mainPanel(h1("Main"),
              p("This famous (Fisher's or Anderson's)", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica. ")

  )
)))

####################
#                  #
#    Exercise 8    #
#                  #
####################

##ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu") ),
    mainPanel(h1("Main"),
              p("This famous (Fisher's or Anderson's)", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica. "),
              br(),
              h2("Analysis")

  )
)))

####################
#                  #
#    Exercise 9    #
#                  #
####################

##ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu") ),
    mainPanel(h1("Main"),
              p("This famous (Fisher's or Anderson's)", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

  )
)))

####################
#                  #
#    Exercise 10   #
#                  #
####################

##ui.R
library(shiny)
shinyUI(fluidPage(
  titlePanel("Shiny App"),

  sidebarLayout(
    sidebarPanel(h2("Menu"),
                 img(src = "petal.jpg", height = 72, width = 100) ),
    mainPanel(h1("Main"),
              p("This famous (Fisher's or Anderson's)", a("iris",href="http://stat.ethz.ch/R-manual/R-devel/library/datasets/html/iris.html"), "data set gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are ",strong( "Iris setosa,"),strong( "versicolor"), "and", strong("virginica.")),
              br(),
              h2("Analysis")

  )
)))