Tag Archives: Shiny

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


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

Interactive Highcharts Heat Maps in R with rCharts


This post shows how to create Highchart Heat Maps in R using the rCharts package. Heat maps are newer Highcharts extensions. Getting rCharts to display heat maps is a little more involved, since the current version of rCharts 0.4.5 does not ship these extensions. Showing heat maps in R with rCharts requires direct linking of these additional JavaScript files.

I will show both how to create a standalone HTML page and a Shiny app. We use the example from http://www.highcharts.com/demo/heatmap to create a map for the sales per employee data.

Here is the code in order to create a standalone HTML page containing a Highcharts Heat Map:

rCharts 0.4.5. currently does include only the standard Highcharts JavaScript files and no extensions for Heat Maps or Highstocks like modules/heatmap.js or stocks/highstock.js. So I include these additional files using the p$addAssets() method.

Still, one need to include more than just the heatmap.js to get it work. The problem seems to be that simply adding the heatmap.js is not enough, there seems to be a version conflict with the HighCharts JavaScript files in rCharts. Therefore, I load some more Highcharts and jQuery JS files externally in order not to run into some NullPointerExceptions when creating the Heatmap.

In Shiny Apps, one can load the JS in the tag$head() function of ui.R instead of the p$addAssets() method:

The Shiny app is available at http://stefanwilhelm.shinyapps.io/heatmap/. The source code of the Shiny example can be found on GitHub at https://github.com/stefanwilhelm/heatmap.

I have asked Ramnath Vaidyanathan, the author of rCharts, to include Highcharts extensions like modules/heatmap.js directly into the package to make them easier to use in R. I will update this post once this change is implemented in rCharts. Until then, you might find my proposed workarounds useful for creating Highcharts Heat Maps.

Edit Apr 19, 2015:
When your data set is larger than 1000 data points, you need to increase the Highcharts turboThreshold parameter as follows

For this Highcharts limitation to 1000 data points by default, see the Highcharts documentation or StackOverflow questions like highcharts-3-cannot-render-more-than-1000-points-in-one-series.
Thanks to Bing Zhang for a question that led me to this issue.