Creating Rating Inputs in Shiny

I had a situtation where I wanted to build a rating or voting input for R Shiny, an Amazon like input widget that displays five stars and users can click on one of the stars and vote from 1 to 5.

When searching for existing javascript libraries for rating inputs, I quickly came across the “bootstrap-rating” library from http://dreyescat.github.io/bootstrap-rating/, which does a very nice job for different kind of rating scales and icons.

I wrote a package ShinyRatingInput which is wrapping up Magazine bootstrap-rating for the use with Shiny. The ShinyRatingInput package and a sample app are available on GitHub and a live app on https://stefanwilhelm.shinyapps.io/ShinyRatingInput-Sample.

ShinyRatingInput allows for easy creating of rating input controls in Personalizado Shiny, such as:

To install, install the devtools package if necessary (install.packages("devtools")) and run:

Usage and Examples

First, choose the rating scale from dataStart to dataStop with dataStart excluded from the interval. The default scale is (0, 5] or [1, 2, 3, 4, 5]. Fractional ratings can be defined using the dataFractions parameter. For example, parameters dataStart=0, dataStop=5 and dataFractions=2 together create an input to choose from [0.5, 1, 1.5, 2, …, 4.5, 5].

Second, choose the rating symbol icon from FontAwesome icons, Glyphicons or your custom icons. Font Awesome and Glyphicons are included in the package.
These go in as the dataFilled and dataEmpty parameters. You can add additional CSS classes to the dataFilled and dataEmpty symbols to control the size or colors.

The following examples

rating-input-examples

are created with these parametrisations of ratingInput:

Some implementation details

The wrapping startnummers of bootstrap-rating is basically an example on how to integrate a third party library into an R package. Other good examples of R packages wrapping javascript libraries for Shiny are shinyDash and shiny-jsdemo.

Using bootstrap-rating, users specify wholesale nfl jerseys the inputs as hidden input elements such as

with a CSS class (“rating” by default) and addtional “data-” attributes. This defines a rating control to select ratings [0.5, 1, 1.5, …, 5] based on red heart icons. JavaScript and jQuery is then used on this input element to create the rating icons.

In R, one needs to define a wrapper method ratingInput(), which loads the JS and CSS files and maps the parameters to bootstrap-rating.
In Shiny apps, we also need to have an inputId for each of the inputs for correct input binding.
Additionally, I want to display additional control texts cheap jerseys like “Please select rating”, which gives the method as

 

For <input type="hidden"> elements, no Shiny input binding exists, so users need to write one on their own (See the discussion on https://groups.google.com/forum/#!topic/shiny-discuss/FU-aDoxKBNA). The solution proposed there was to use normal text inputs with “display:none”, because for text inputs meals the Shiny binding is already available. Hence, I use <input type="text" style="display:none"> instead of  <input type="hidden">.

9 thoughts on “Creating Rating Inputs in Shiny

  1. RD

    Is there a way to use ratingInput server side as part of a renderUI? When I try, I get just the text none of the star images.

    Reply
  2. Patrick

    Hello,

    Firstly I want to thank you for sharing this package with the world. It is great feature for shiny application I am working on. However, when I was trying to create disabled rating with chosen maximum value , output was blank. For example, when the datastop is 5, I cannot put value greater than 4.
    See the code below
    ratingInput(“sqlrating”, label=””, readonly = TRUE,dataStop = 5, value = 4.5, dataFractions = 2),

    returns blank (all stars are white instead of all black).

    Do you know how to solve it?

    Reply
    1. Stefan Wilhelm Post author

      Thank you very much for pointing to this. I see an issue in the bootstrap-rating library which restricts the possible values to [0, 4] instead of [0, 5], so values greater than stop-1 are not shown. I see this fixed in a more recent version of this library, so I will try patch this in the ShinyRatingInput package, too.

      Reply
    2. Stefan Wilhelm Post author

      I pushed a fix to GitHub, getting the latest ShinyRatingInput package version should fix your problem (devtools::install_github(“ShinyRatingInput”, “stefanwilhelm”)) with

      ratingInput(“rating1″, label=””, readonly = TRUE, dataStop = 5, value = 2.5, dataFractions = 2),
      ratingInput(“rating2″, label=””, readonly = TRUE, dataStop = 5, value = 3.5, dataFractions = 2),
      ratingInput(“rating3″, label=””, readonly = TRUE, dataStop = 5, value = 4.5, dataFractions = 2),
      ratingInput(“rating4″, label=””, readonly = TRUE, dataStop = 5, value = 5, dataFractions = 2)

      Please let me know if this works for you!

      Reply
  3. jp

    Hi Stefan
    Thanks for the package, really helpful!
    I’m facing implementation issues, and I’d like to know what approach you recommend to overcome these. The rating works, however:
    1. Including the function ratingInput() alters the look of the application.
    2. All elements of ratingInput() display in black, irrespective of color instructions passed as in your examples.

    It seems that the CSS is messing with the shinytheme() ‘spacelab’ that I’m using. What would you suggest I do to avoid this?
    Many thanks

    Reply
    1. Stefan Wilhelm Post author

      Thank you very much for your comment. The ratingInput() method comes with its own bootstrap.min.css and therefore overwrites any shiny theme. I am trying to remove this dependency in that I add a switch in ratingInput(…, includeBootstrapCSS=FALSE). When doing so, you can load your Bootrap theme with shinythemes.

      Reply
  4. Carlos

    Hi Stefan,

    Is there a way to display a ratingInput from the server side inside a uiOutput()?

    The following is just a silly example but it does not display the icons:

    library(ShinyRatingInput)
    ui <- navbarPage("Test",
    tabPanel("tab1",
    uiOutput("movieRating"))
    )

    server <- shinyServer(function(input, output, session) {
    output$movieRating <- renderUI({
    ratingInput(inputId = "rating",
    label="Rate this movie…",
    dataStop=10,
    dataFractions=2)
    })
    })

    Thanks in advance for your help.

    Carlos

    Reply
    1. Stefan Wilhelm Post author

      Hi Carlos,

      I fixed this issue with renderUI/uiOutput on GitHub. So getthing an updated ShinyRatingInput package version should solve the problem. The reason was that the JavaScript to create the rating inputs was just executed once after document ready. I changed this execution for each input immediately after its creation, which includes the dynamic UI. For the old ShinyRatingInput package version, this is the fix:

      output$movieRating < - renderUI({ tagList( ratingInput(inputId = "myratingid", label="1. Rate this movie?", dataStop=10, dataFractions=2), tags$script("$('input.rating#myratingid').rating();") ) })

      This is not necessary with the new package. Please let me know if it works for you.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *