Make dashboard Tiles/Notecards in R

Update!!

Due to the popularity of this script, I released it as a package. To install it, use:

devtools::install_github("mexindian/TileMaker")

———————————————————–

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 (full code to produce this example below):

…which is suitable for any dashboard you choose!

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   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 see how we did that example above:

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
## Install the package, and call the library
devtools::install_github("mexindian/TileMaker")
library(TileMaker)
## 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 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!

  19 comments for “Make dashboard Tiles/Notecards in R

  1. Maëlle Salmon
    2016/02/26 at 10:17

    Oh that’s neat! And you can even add them in RMarkdown document, e.g.
    creation in a first chunk and then

    “`{r echo=FALSE}
    knitr::asis_output(htmltools::htmlPreserve(Div1))
    “`

    That’s really cool!

    • Amit
      2016/02/26 at 14:16

      Yeah, it’s straight HTML… so you can use it wherever 🙂

      • Maëlle Salmon
        2016/02/26 at 14:17

        Thanks a lot for the code 🙂

        • Amit
          2016/02/26 at 14:23

          Thank Bootstrap! Those dudes are awesome. (but you’re welcome :))

  2. 2016/02/26 at 13:15

    Very nice article!!
    I’m searching for a solution like this, without use of a Shiny Server.

    Would be nice to include Sparklines graphs on the tiles, like these: https://qph.is.quoracdn.net/main-qimg-1b810488944d75e008b1e87713d74a54?convert_to_webp=true

    And on others, put some other information (showing growth for example), like these:
    https://trello-attachments.s3.amazonaws.com/56a388faf8f2000056b2eeca/730×130/9360c0c5c62d724933969f613d1024cf/upload_23_1_2016_at_12_07_08.png

    Do you think it’s possible, or is much hard to do?

    Thanks, Diego.

    • Amit
      2016/02/26 at 14:19

      No, en teoria se puede hacer… fijate aca: http://themes.getbootstrap.com/products/dashboard… ellos metieron un sparkline de chartjs me parece… soy horrible con JS por eso no lo probe, pero te animas vos? Proba, aver q pasa… y mandame un pull-request si lo conseguis! En cuanto el segundo link es m’as facil todav’ia… yo q vos, hago las modificaciones en el HTML final… y cuando te gusta el resultado, mete los huecos apropiados en el source-code. Podes?

      • 2016/03/02 at 17:05

        Muchas gracias por su respuesta.
        Voy intentar hacer, y cuando tuver uns solución hago un pull request. Es que estoy sin tiempo, pero voy intentar. Creo que es una buena solución para informes!

        Muchas gracias!!
        Ps. Soy brasileño (pero Gaona es de mi tatarabuelos de Catalunia), pero compreendo bién inglés y castellano, sólo no escribo muy bien jeje

        • Amit
          2016/03/02 at 17:11

          Don’t worry… in the meantime I’m making more changes. Just make sure you pull the latest version before making modifications to minimize the chance of a conflict. Eu comprendo Port, mais lo falho muito ruin! Mais eu podo comprender, or english or spanish. Falho!

  3. Stefan
    2016/03/01 at 13:22

    Great post, thanks a lot! Would you know of any easy way to include these objects into Shiny code?

    • Amit
      2016/03/02 at 09:06

      If you’re already in shiny, look at shinydashboard… that already has a great tile inside it. Might be called NoteCard.

      • Stefan
        2016/03/17 at 12:48

        Yes, indeed there is – however you are not very flexible with the size and choice of colours using ValueBoxes

        • Amit
          2016/03/17 at 14:51

          You’re saying the shiny one isn’t very flexible? I’d suggest you add the question to them…

          • Stefan Mättig
            2016/03/30 at 07:31

            Yes, therefore I was wondering if you know how I could integrate the TileMaker objects into a shiny dashboard. I was trying to use htmlOutput, however without success. But maybe you are right and I should post this question i a shiny forum. Thanks anyway!

          • Amit
            2016/03/31 at 11:22

            hrm. Maybe if you try to `htmlOutput` the button, or the div, but not the whole tile? Please enter it as a feature request on github w/ your code and I’ll take a look.

  4. 2016/03/08 at 21:12

    Thanks for this. Very cool and useful. Is there a way to use custom icons not defined here: http://getbootstrap.com/components/
    Thanks

    • Amit
      2016/03/17 at 11:25

      I don’t see why not. All you have to do is replace the “`glyphiconstuff`” for the image you want… so “``”. That should work… Let me know if it doesn’t.

  5. Abhishek Vedula
    2016/08/19 at 07:21

    Hi Amit it is a very helpful tool. Can we add tiles to in the main panel of shiny and link them to other analysis ?
    If yes, can you please show me a a way to do it.

    • Amit
      2016/09/09 at 03:18

      Glad u like it. If you are already in shiny, look up shinydashboard… Its much better than this.

Leave a Reply