R highcharter -- save charts to html file for external iframe?

If you have a R highcharter object, how do you export it into a standalone html file that could be included in an iframe:

For example:

library(highcharter)
hc <- hchart(cbind(fdeaths, mdeaths), separate = FALSE)

then, I'm looking for something like:

 save_as_html(hc,filename)

Matlab's HighChart codes works something like this:

hc = HighChart('datetime');
hc.series{1}.data = [ttt(ii3day), -vd(ii3day)];
hc.save('plot_hc.html');

with the produced plot_hc.html code being similar to:

<!DOCTYPE html> 
<html> 
<body> 
<div id="con_8rHh7YjNg4" class="HighChart" style="width:800px; height:400px;"></div></body> 
<footer> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/modules/heatmap.js"></script> 
<script> 
$(function () { 
 $('#con_8rHh7YjNg4').highcharts({ 
chart:{type:'line',zoomType:'x',panning:'true',panKey:'shift'}, 
title:{text:'observations'}, 
xAxis:{title:{text:'UTC Time'},type:'datetime'}, 
yAxis:{title:{text:'feet'}}, 
series:[{name:'Observations',data:[[1508371860000,-1.089000e+01],[1508371920000,-1.086000e+01],[1508371980000,-1.085000e+01],[1508372040000,-1.085000e+01],[1508372100000,-1.084000e+01],[1508372160000,-1.083000e+01],[1508372220000,-1.081000e+01],[1508372280000,-1.082000e+01],[1508372340000,-1.081000e+01],[1508372400000,-1.080000e+01],[1508372460000,-1.080000e+01],[1508372520000,-1.078000e+01],[1508372580000,-1.078000e+01],[1508372640000,-1.077000e+01],[1508372700000,-1.077000e+01],[1508372760000,-1.075000e+01],[1508372820000,-1.075000e+01],[1508372880000,-1.076000e+01],[1508372940000,-1.073000e+01],[1508373000000,-1.070000e+01],[1508373060000,-1.071000e+01],[1508373120000,-1.072000e+01],[1508373180000,-1.071000e+01],[1508373240000,-1.069000e+01],[1508373300000,-1.068000e+01],[1508373360000,-1.068000e+01],[1508373420000,-1.067000e+01],[1508373480000,-1.066000e+01],[1508373540000,-1.067000e+01],[1508373600000,-1.064000e+01],[1508373660000,-1.063000e+01],[1508373720000,-1.062000e+01],[1508373780000,-1.062000e+01],
}); 
}); 
</script> 
</footer> 
</html>

This sort of html file works easily as an iframe within with my institution's Content Management System, and I'd like to do something similar with R.

I've tried export_hc(hc,"plot_hc.html") but it appears to be only javascript. The ?export_hc() help appears inscrutable. What do I do with the output? Do I insert it directly into a template like the matlab result?

I've tried highchartOutput(hc) and highchartOutput2(hc) but I'm not sure how to make use of the return values.

ETA:

I'm using release 0.5.0 per https://github.com/jbkunst/highcharter/blob/v0.5.0/R/export_hc.R

Experimenting with the matlab template, it seems to work OK if I change the div id to match the export_hc default container, as in :

<!DOCTYPE html>
<html>
<body>
<div id="container" class="HighChart" style="width:800px; height:400px;"></div></body>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script>

.... export_hc() output pasted here

</script>
</footer>
</html>

It looks like the current github version of highcharter::export_hc() include additional options for naming the container and formatting the result that are not available in the v0.5.0 version.

ETA:

If I re-write the export_hc function and add an ugly helper function like this:

library(highcharter)

my_export_hc <- function (hc, filename = NULL) 
{
    . <- NULL
    jslns <- hc$x$hc_opts %>% toJSON(pretty = TRUE, auto_unbox = TRUE, 
        force = TRUE, null = "null") %>% str_split("\n") %>% 
        head(1) %>% unlist() %>% str_replace("\"", "") %>% str_replace("\":", 
        ":")
    fflag <- str_detect(jslns, "function()")
    if (any(fflag)) {
        jslns <- ifelse(fflag, str_replace(jslns, "\"function", 
            "function"), jslns)
        jslns <- ifelse(fflag, str_replace(jslns, "\",$", ","), 
            jslns)
        jslns <- ifelse(fflag, str_replace(jslns, "\"$", ""), 
            jslns)
        jslns <- ifelse(fflag, str_replace_all(jslns, "\\\\n", 
            str_c("\\\\n", str_extract(jslns, "^\\s+"))), jslns)
    }
    jslns <- jslns %>% unlist() %>% tail(-1) %>% str_c("    ", 
        ., collapse = "\n") %>% str_replace_all("\n\\s{4,}\\]\\,\n\\s{4,}\\[\n\\s{4,}", 
        "],[") %>% sprintf("$(function () {\n  $('#container').highcharts({\n%s\n  );\n});", 
        .)
    if(length(filename)>0) { 
      if (!str_detect(filename, ".js$")) 
        filename <- str_c(filename, ".js")
      writeLines(jslns, filename) 
     } 
     else return(jslns)

}
environment(my_export_hc) <- asNamespace('highcharter')

my_save_hc <- function(hc,filename){

prefix_hc = '<!DOCTYPE html>
<html>
<body>
<div id="container" class="HighChart" style="width:800px; height:400px;"></div></body>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script>
'

suffix_hc = '</script>
</footer>
</html>
'

cat(prefix_hc,my_export_hc(hc),suffix_hc,file=filename)
}

Then code like this works:

library(highcharter)
hc <- hchart(cbind(fdeaths, mdeaths), separate = FALSE)
my_save_hc(hc,"junk.html")

to produce

<!DOCTYPE html>
<html>
<body>
<div id="container" class="HighChart" style="width:800px; height:400px;"></div></body>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script>
 $(function () {
  $('#container').highcharts({
      title: {
        text: null
      },
      yAxis: {
        title: {
          text: null
        }
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      plotOptions: {
        series: {
          turboThreshold: 0
        },
        treemap: {
          layoutAlgorithm: "squarified"
        },
        bubble: {
          minSize: 5,
          maxSize: 25
        }
      },
      annotationsOptions: {
        enabledButtons: false
      },
      tooltip: {
        delayForDisplay: 10
      },
      xAxis: {
        type: "datetime"
      },
      series: [
        {
          data: [
            [
              126230400000,
              901],[128908800000,
              689],[131328000000,
              827],[134006400000,
              677],[136598400000,
              522],[139276800000,
              406],[141868800000,
              441],[144547200000,
              393],[147225600000,
              387],[149817600000,
              582],[152496000000,
         //....
              940],[307584000000,
              1081],[310262400000,
              1294],[312854400000,
              1341
            ]
          ],
          name: "mdeaths",
          id: "mdeaths"
        }
      ]
    }
  );
}); </script>
</footer>
</html>

Solution

Try using htmlwidgets::saveWidget:

library(highcharter)
library(htmlwidgets)

hc <- hchart(cbind(fdeaths, mdeaths), separate = FALSE)
saveWidget(hc, file="highchart.html")

The output is: