If you know a little R then it's fairly straight-forward to put dynamic text on your page in Displayr. Such text can automatically update itself when the data is filtered or when the viewer uses the menus you have added to your page. But what if you want the message to change color based on the data? Or what if you want to make the message disappear when it is not relevant? With R and HTML you can make nicely-formatted messages to alert your viewers to issues in the data.

Displayr documents are dynamic. This means that the data in your document can be updated automatically on a regular basis, and the people who view your published document can interact with it using filters and custom menus (like the ones here on this dashboard). In some cases, you might want to show people messages about the data when they are interacting with it. For instance, market researchers are usually conscious of the sample size that has been used to compute their statistics - in addition to showing it on their dashboard page (as done here) - they may also like to present their viewers with a warning message if the sample on the page drops below a certain level.

An R Output can be used to generate text on a page which updates with the data. However, the formatting remains fixed. With the rhtmlMetro package in R, you can generate text whose format also changes with the data. It takes a little more effort, but the results are much cooler.

Click here for an interactive tutorial on creating dynamic text

Example

Here, I will consider a really basic example. I have a small study on people's attitudes to technology brands. I have built a one-page dashboard showing the average satisfaction scores for each of the brands in my study. It looks like this:

I've set the visualization to sort automatically when the page is filtered. The sample size description at the bottom of the page will also update with any filters. This was created with Insert > More > Data > Sample Size Description. To read more about this feature, see "How to Display the Sample Size on an Online Dashboard."

Check out the published version of my document here.

What you don't see in the screenshot above is the hidden warning message that appears when the sample on the page drops below n=30. If you go into the interactive version and use the Filters menu in the top right to apply a filter for people who have an income Less than $15,000, you will see it change. It will look like this:

I now know that I need to be careful when thinking about or reporting on these figures, and the page won't let me forget it!

How does it work?

I set this up using R and HTML. I'm no wizard with either (especially not HTML!), but it's actually fairly straight-forward.

To create the output:

  1. Select Insert > R Output.
  2. Enter the code below.
  3. Modify the second line to incorporate variables which define the sample (more on this below).
  4. Tick Automatic. This ensures that the message will update when the filter on the page changes.

The code for this is:

min.sample = 30 # Set the threshold for small sample
current.sample = length(which(QFilter & !is.na(Q3_01))) # Obtain the current filtered sample
contents = ifelse(current.sample < min.sample, "Warning! Low base size, exercise caution.", "") #Change the text of the message
bgcolor = ifelse(current.sample < min.sample, "#42afe3", "#FFFFFF") #Change the background color of the message
opacity = ifelse(current.sample < min.sample, "1", "0") #Change the opacity of the message
textcolor = "#FFFFFF" #Set the font color

#Build the HTML for the text
your.html = paste('<DOCTYPE html><html><head><style>div.mystyle {font-size: 16; font-family: Open Sans; padding-left: 10; padding-top: 10; padding-bottom: 10; background-color:', bgcolor, '; color: ', textcolor,'; opacity:', opacity, ';}</style></head><body><div class = "mystyle">', contents, '</div></body></html>', sep="")

# Render the HTML
rhtmlMetro::Box(text = your.html, text.as.html = TRUE)

The Code walk-through:

In the code above, I have set the warning to appear when the sample size for the page is less than 30. To work out the sample size I check QFilter, which is a special property in Displayr which returns a vector of TRUE/FALSE values indicating which cases in the data set are included in the filter. I also check the values of the first satisfaction variable, called Q3_01. If this variable has a missing value (denoted NA or  NaN in the R Code), then those cases are also not counted in the sample. I used the function is.na() to work this out. Counting is done by using the which() function to identify the cases which satisfy the two conditions, and using the length() function to count them.

Next, I use the ifelse() function to conditionally choose the color, contents, and opacity of the message box, based on the sample size I had counted previously. This function takes three arguments. The first is the logical condition you want to evaluate. In this case I am considering whether the number of valid cases on my page is less than the minimum sample size of 30. The second argument is the value to return when the condition is true, and the third argument is the value to use when the condition is false.

The paste() function combines all of the options I have determined based on the sample size into a string which defined the HTML code for my message. In this case, my HTML creates a CSS style called div.mystyle which contains all of the properties I have set, including background color, font color, padding, and opacity. You can do much more with CSS. Whenever I want to do something I just search Google and work out which property I need to set. Once the style is created, the HTML simply contains a body with a single div, and uses the class "mystyle" to apply the properties that I have specified. If you want to see how the HTML looks, just comment out the final line of the code above (put a # in front of it) and re-calculate your output.

Finally, the Box() function from the rhtmlMetro package is used to render the HTML on the page.

Find out how to more in Displayr by heading over to "Using Displayr".