In this post I show how to write code to create automatically-updating text boxes, where the text and icons update when data changes.

Showing the date

I am going to start with a very simple example, and then build up to more complex ones. To make Displayr show today's date:

  • Press Insert > R Output (Analysis), which is in the ribbon at the top of the screen.
  • Type Sys.Time() into the R CODE box in the Object Inspector (on the right of the screen).
  • Press  CALCULATE  and you will now see the date in the universal time zone.

Showing the time

Now, modify the code in the R Output to be format(Sys.time(),'%A, %B %d, %Y %H:%M:%S') and press  CALCULATE . You will now see the date and time (be a bit careful here, you want to use single quotation marks, and there is a good chance that these have been automatically tidied up to look pretty in your browser, so copying and pasting can be risky). Click here for more information on formatting of dates and times.

Creating more complicated text

We can embed the date and time into a sentence. For example, the following code produces the text shown below. The paste0 function glues together three bits of text: the initial sentence, the date, and the full stop at the end.

 
paste0("Today's date and time is: ", 
       format(Sys.time(),'%A, %B %d, %Y %H:%M:%S'),
       ".")

Using icons instead of text

We can also use code to create icons. This code creates the red arrow shown below. All the key bits of the code are in the first line, which sets the color, font size of the icon, and tells it that we want to use an arrow. For information about how to choose different icons, read Adding Icons to Dashboards Using Font Awesome.

 
icon <- '<font color="red" style="font-size: 50pt"><i class="fas fa-arrow-down"></i></font>'
fontawesome_css <- '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">'
rhtmlMetro::Box(text = paste(fontawesome_css, icon), text.as.html = TRUE)

Making things change based on the data

By default, Displayr automatically places arrows on many tables to show statistical significance. However, you can also use icons to manually created your own arrows on tables. In this example, the table has first been created, and then an R Output containing code has been placed on top of it. However, the really nifty bit of this example is that if we change the data in the table, the arrow changes as well, so the same code is used to produce the red arrow in the first table and the green arrow in the second.

The R code shown below may look a bit intimidating at first, but is quite straightforward to understand:

  • The first line creates a green arrow, called green.up.
  • The second line creates a red arrow.
  • The third line says that if row 1 of data in the table is higher for the Male column than the Female column, to show a green arrow, and otherwise show a red arrow.  This formula is a bit simplistic, in that it will show a red arrow for ties, but hopefully you get the basic idea.
  • The last two lines are just boilerplate (i.e., you can just copy and paste them without understanding them).
 
green.up = '<font color="green" style="font-size: 30pt"><i class="fas fa-arrow-up"></i></font>'
red.down = '<font color="red" style="font-size: 30pt"><i class="fas fa-arrow-down"></i></font>'
icon <- if (table.Income.by.Gender[1, "Male"] > table.Income.by.Gender[1, "Female"]) green.up else red.down
fontawesome_css <- '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">'
rhtmlMetro::Box(text = paste(fontawesome_css, icon), text.as.html = TRUE)

Manual formatting

We can manually set lots of aspects of the formatting, such as fonts, background colors, alignment and spacing. This is all done by selecting from the options in LAYOUT and APPEARANCE (underneath the R CODE). If you can't find the options make sure you have the R Output selected then select the Properties tab in the Object Inspector).

Formatting via code

In the box above, the text itself was written with code, but the box was formatted manually. We can do everything via code, if necessary. For example, the coloring, placement of text and the icon are all controlled by code in this example. This is a bit tricky to do, and you will need to learn some HTML if you want to do things like this.

 
library(rhtmlMetro)
number <- 45
icon <- '

<div style="flex: 1 1 30%; display: flex; align-items: center;"><font color="red" style="font-size: 48pt"><i class="fas fa-ambulance"></i></font></div>

'
description <- 'Injuries per day' text_wrapper <- paste('

<div style="flex: 1 1 50%; color: white; display: flex; flex-direction: column; padding: 12pt">

<div style="font-size: 32pt; font-weight: bold">', toString(number), '</div>


<div>', description, '</div>

</div>

')
box_color <- '#61A1E9'
box_html <- paste('

<div style="height:100%;', 'background:', box_color, ';display:flex">', text_wrapper, icon, '</div>

')
fontawesome_css <- '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">'
html <- paste(fontawesome_css, box_html)
Box(text = html, text.as.html = TRUE)

 

Check out more handy tips here!