Get startedGet started for free

Highlighting single values

1. Highlighting single values

We've talked about adding graphs to your dashboard - now we'll cover ways to highlight single values.

2. Single values in Dashboards

This dashboard shows two ways to display single values. On the upper right there is a value box showing the total number of bikeshare trips for the day. Below that there is a gauge showing the percentage of those trips that were taken by bikeshare subscribers. A gauge is often a good choice for values that will fall within a defined range, especially if there are thresholds within that range. A value box is the best choice for unbounded values. Let's look at how these are created.

3. Value Boxes

We'll start with value boxes. These are created with the valueBox function, which is part of the flexdashboard package. The function should be in an R chunk in its own chart, like a graph would be. For the simplest value box, you need only pass a value to the valueBox function. It will produce a value box like the one shown in the top row here, with the chart name under the value. To make a nicer value box, you can add your own caption and include an icon to be shown on the side of the box. You can browse available icons in the Font Awesome and Glyphicon libraries, and more can be found in the documentation for the icon function. For larger values, it is often appealing to have commas for readability. You can achieve this with the prettyNum function as shown in the third row.

4. Gauges

Creating a gauge requires three things: a value, a min, and a max. The first example shown here has the basics needed to produce a gauge. The min and max determine the values at the ends of the gauge. In the second example, we've added sectors which define the color of the gauge based on the value. In this example, the gauge would turn red if the percentage of trips taken by bikeshare subscribers fell below 70%. The three color zones for success, warning, and danger are set by default based on the color theme of the dashboard, but can also be customized. The final argument added here is symbol, which defines units you may want to display with the gauge value.

5. Links

Both value boxes and gauges can be linked, which is a nice way to lead your dashboard viewers to more information about the value they're looking at. In either the valueBox or gauge function, use the href argument to make the caption linked and clickable. The value of href can be a URL or the "anchor" based on the name of another page in your dashboard. In this example, the link would take the user to the dashboard page called Trip Raw Data.

6. Let's practice!

Time to put this into practice.