Your first shinydashboard

1. Your first shinydashboard

We will now construct our first full shinydashboard.

2. The road so far

We have seen how wire-framing can be carried out for the user interface. Particularly, in a shinydashboard, the UI is made up of the header, side bar, and body. These are typically placed in dashboardPage and stored as ui. We now need to define the outputs and specify exactly how they will interact with user inputs. This is the server, which is not unlike the friendly waiter from the restaurant earlier, who brought us each dish based on our instructions. Finally, we will then glue the UI and server using the shinyapp function.

3. The server

Let us first look at the server. As we said earlier, we need to define outputs and inputs here. Particularly, we need to specify exactly what these outputs are, and how they interact with user inputs. While we can define each output within a single block of code in the server function, it is often neater to define our own helper functions to generate our desired outputs. These helper functions should take in dashboard inputs as arguments. As a convention, we should define our helper functions at the top of our code, just after where we import the required libraries.

4. Adding a plot

Let us begin by adding a plot in the dashboard that we have been building for a global soccer tournament. Particularly, we shall add a hexbin plot that shows the relative distributions of the passes completed and goals prevented by team one over all the matches. This can be achieved by using the geom_hex function from ggplot. We will then need to place this plot in the server, by assigning the plot as output plot1, so that it will be rendered in the dashboard. What if we also want to show the same hexbin plot, but for team two instead?

5. Defining ggplot objects within server

One way to do this is to define an input called team, that allows users to toggle between teams one and two. Then, we can add in some conditionals that will allow the plots for team one and team two to be outputted based on the team number selected by the user. This works perfectly well. However, the code is a little clunky, and can be difficult to read, especially if we have many more outputs.

6. Using helper functions

Instead, we can define a helper function to generate a different hexbin plot for each team. Here is one way to achieve this. This is a function called plot_hex that takes in one argument - which is just the team number. Remember, this chunk of code does not need to be defined within the server function.

7. Using helper functions

We can then call this helper function in the server. Here is the code without a helper function for comparison. Doesn't the helper function make the code more readable?

8. Putting it all together

We now have all the components of our shinydashboard. We have the UI, which is comprised of the header, side bar and body. We have the server where outputs and their interactions with user inputs are defined. Finally, the UI and server can be glued together using shinyApp. This isn't too different from the shinyApp that we have created earlier.

9. Putting it all together

Indeed, running shinyApp then renders our first shinydashboard! Users can now interact with the dashboard, by going to a different dashboard page, or toggling between the two plots.

10. Let's practice!

You can now give this a try!

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.