Tag Archives: Input

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">.