Make dashboard Tiles/Notecards in R

Dashboard Tiles/Notecards are a great way to visualize just one number, and make it big and pretty. They can emphasize results in an easily digestible and colourful format. I was surprised that there was no way to create tiles offline (there is however a very good online version in shinydashboards), so i made one.

I wanted something that would look pretty, but also be flexible. Hrm… if only there was a flexible tool that made pretty webpages… Of course I’m talking about the ever-awesome Bootstrap!  In case you’ve been living under a rock and don’t know what that is, it’s the most popular framework for developing AWESOME mobile-friendly webpages around. Think of it as “webpage lego”, only when you’re done, things actually look good.

All I needed to do was figure out how to get data from R, select what features to include (ranging from a base template to link-enabled multi-sized buttons that change color based on values) and stuff all of it into a webpage enriched by Bootstrap’s CSS tags, and boom! This is what I got:

Also, because it’s a webpage, it’s got that nice mouse-over highlighting effect (yes, it’ll do tooltips too). All you have to do is source the R file from the github repo, or   < !-- iframe plugin v.4.2 wordpress.org/plugins/iframe/ --> your own version.

I allowed for many settings to be passed from R, check the Repo readme for an explanation… but in the meantime, let’s try out an example here:

Let’s say that I want to create a dashboard that showcases five buttons: one row of three buttons, and a second row with two buttons. I want to give them some icons and I want the top 3 to change color depending on the value that’s being passed to them. To accomplish this, we could do:

## your very important calcs will end up with the following data, for example
Value1 = 88
Value2 = 1985
Value3 = 1.22
Value4 = 30
Value5 = 42
## source in my file, which contains 3 functions.
source("https://raw.githubusercontent.com/mexindian/TileMaker/master/tilemaker.R")
## Make the buttons how you like
Button1 <- ButtonMaker(Value = Value1,
 Subtitle = "Speed",
 Units="mph",
 Target=88,
 ThresholdHigh=80,
 ThresholdLow=70, 
 Icon="glyphicon glyphicon-road")
Button2 <- ButtonMaker(Color = 4,Value = Value2,
 Subtitle = "Origin", 
 Target=2015,
 ThresholdHigh=99,
 ThresholdLow=40, 
 Icon="glyphicon glyphicon-share-alt")
Button3 <- ButtonMaker(Value = Value3, 
 Subtitle = "Powah",
 Units="GW", 
 Target=5,
 ThresholdHigh=4,
 ThresholdLow=3, 
 Hover="Great Scott!",
 Icon="glyphicon glyphicon-signal")
Button4 <- ButtonMaker(Color = 4,
 Value = Value4,
 Subtitle = "Heads turned",
 Units="K", 
 Icon="glyphicon glyphicon-user")
Button5 <- ButtonMaker(Color = 5,
 Value = Value5,
 Subtitle = "Answer",
 Hover="Whales rule. Petunias suck",
 Link="https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy",
 Icon="glyphicon glyphicon-thumbs-up")
## Combine in 2 rows:
Div1 <- DivMaker(Title = "Doing Homework",Buttons = paste(Button1,Button2,Button3))
Div2 <- DivMaker(Title = "Effect",Buttons = paste(Button4,Button5))
## Now put them all together:
TileMaker(Divs = paste(Div1,Div2),FileName = "buttons.html")
## and win!
browseURL("buttons.html")

This will give you a page that looks like this:
< !-- iframe plugin v.4.2 wordpress.org/plugins/iframe/ -->

…which is suitable for any dashboard you choose!

This is just the beginning. This method can be pretty powerful… for example, doing the same thing with Bootcards, or with Bootstap v.4 coming up… the Statcards look AWESOME (I would use that, but a) I don’t want to use code that’s still in alpha, and b) I’m not sure if it’s cool to take code from a paid template… could someone tell me please?).

For anyone out there willing to add functionality, I’m welcoming pull-requests from one and all!

Edited by: Laure Belotti . Just a quick note, she has been editing my blog forever, and has finally set up shop in Upwork. Go hire her!