Interactive Highcharts Heat Maps in R with rCharts

highcharts-heatmap

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.

11 thoughts on “Interactive Highcharts Heat Maps in R with rCharts

  1. Winn Haynes

    Thank you very much for putting this together! Have you had any luck (or advice for) getting the extended version of heatmaps to work? Like in .

    Reply
  2. Pingback: Using Highstocks in R Shiny apps | Stefan Wilhelm

  3. Mark Riseley

    I figured out to fix the package source. See my forked version for changes in the
    “inst/libraries/highcharts” folder:
    https://github.com/markriseley/rCharts/tree/addheatmap/inst/libraries/highcharts

    What you need to do is:
    1) Add heatmap.js file to inst/libraries/highcharts/js
    2) Add ” to inst/libraries/highcharts/layouts/script.html
    3) Add references to heatmap.js in inst/libraries/highcharts/config.yml so it will look like this:

    highcharts:
    jshead:
    – js/jquery-1.9.1.min.js
    – js/highcharts.js
    – js/highcharts-more.js
    – js/exporting.js
    – js/heatmap.js
    cdn:
    jshead:
    – “//code.jquery.com/jquery-1.9.1.min.js”
    – “//code.highcharts.com/highcharts.js”
    – “//code.highcharts.com/highcharts-more.js”
    – “//code.highcharts.com/modules/exporting.js”
    – “//code.highcharts.com/modules/heatmap.js”

    I presume this would work the same for highstock etc but I haven’t tried. NB I made some other changes (to do with respecting factor levels in ordering data) so this isn’t a clean fork to merge back into Ramnath’s master.

    I hope this is useful.

    Reply
  4. psdcc

    Would it also be possible to have a table update with all the individual items that have been summarized in the cell? By way of illustration using the highcharts demo, in the first cell it says that Alexander sold 67 items. Could there be a table that lists all the 67 items?

    Reply
    1. Stefan Wilhelm Post author

      Yes, that is possible, either by passing the table data to the tooltip as well (possibly to much information in a popup), or, by having a data table in shiny that updates reactively. The question is, which event triggers the table update. Is it just the mouse-over over a cell, or does a user need to click on a particular cell. What were your thoughts?

      Reply
  5. Kavi Tan

    Hi,
    Is it possible to add additional data to be displayed on the tooltip?
    Using the dataset you have, say instead of displaying sold x amount of items on Friday, I have 2 columns in addition to the x and y values, one for number of apples sold and the other for number of orange sold. I want the tooltip to display number of apples sold and oranges for that person on that day.
    I have tried adding another series, but then I don’t know how to access that in the tooltip.
    Thanks.

    Reply
    1. Stefan Wilhelm Post author

      Hi,

      yes, additional data in the tooltip is possible, even with arbitrary HTML content. One example in Highchart would be:


      p$tooltip(
      useHTML = TRUE,
      headerFormat = '<table>',
      pointFormat = paste('<tr><th colspan=2><h3>{point.ticker}</h3></th></tr>',
      '<tr><th colspan=2>{point.name}</th></tr>',
      '<tr><th>',xAxisLabel,':</th><td>{point.x:.2f}', xSuffix, '</td></tr>',
      '<tr><th>',yAxisLabel,':</th><td>{point.y}', ySuffix, '</td></tr>',
      ifelse(zAxisLabel == "Constant", "", paste('<tr><th>',zAxisLabel,':</th><td>{point.z}', zSuffix, '</td></tr>')),
      ifelse(groupLabel == "Constant", "", paste('<tr><th>',groupLabel,':</th><td>{point.groupBy}', '</td></tr>'))),
      footerFormat = '</table>',
      followPointer = TRUE
      )

      Please let me know if this works for you.

      Reply
  6. Rob

    I am able to create this. However, when I am trying to highlight some set of these squares using border line it is not working out properly.

    1) I am unable to just show top and left borders (need it for some specific data points)
    2) When using borders, the border coming has different width for all the 4 lines.

    Tried using pixel/line spacing but nothing is working out

    I am including both actual and forecast data and the forecast data is on the diagonally right side. So, i am trying to draw line around top and left border to show the separation. Any other creative ideas are welcome!

    Reply

Leave a Reply

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