highcharter integration in R Shiny "html template"-based application

Question

CONTEXT
I want to create a R Shiny dashboard using advanced UI, based on html template. The UI is thus built in pure HTML, and I'm using a bootstrap 4 free template as a starting point.

ISSUE While using highcharter and its Shiny integration functions works fine with super basic HTML files (same as in the above tutorial), charts do not display once I use a bootstrap dashboard theme.

WHAT I HAVE TRIED

Several bootstrap templates:
- SB Admin 2
- Gentelella

REPRODUCIBLE EXAMPLE
Sharing a reproducible example is difficult here as you would need the full SB Admin 2 folder to make it work. Basically this does not work:

 # insert the following in my HTML template (index.html)
 {{ highchartOutput("highcharter_plot") }}

Corresponding reproducible server part:

# in server.R
output$highcharter_plot <- renderHighchart({
data(citytemp)

hc <- highchart() %>% 
  hc_xAxis(categories = citytemp$month) %>% 
  hc_add_series(name = "Tokyo", data = citytemp$tokyo) %>% 
  hc_add_series(name = "London", data = citytemp$london) %>% 
  hc_add_series(name = "Other city",
                data = (citytemp$tokyo + citytemp$london)/2)

hc

})

INTUITION I guess there might be a conflict somewhere, or a missing link to js files, but I've been so far unable to source and solve this problem

INDEX.HTML HEAD

<head>

    {{ headContent() }}
    <!-- required R Shiny HTML template -->

    <script src="shinyjs/inject.js"></script>
    <!-- required to use shinyjs -->

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Title</title>

    <!-- Bootstrap Core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="../vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

INDEX.HTML CALLS TO JAVASCRIPT

Commenting the first line makes highcharter work (but as a consequence other interactive features are broken...)

    <script src="../vendor/jquery/jquery.min.js"></script>
    THE ABOVE LINE SEEMS TO BE IN CONFLICT WITH JQUERY USED BY HIGHCHARTER

    <!-- Bootstrap Core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="../vendor/raphael/raphael.min.js"></script>
    <script src="../vendor/morrisjs/morris.min.js"></script>
    <script src="../data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

PACKAGES LOADED IN GLOBAL.R

pkgs <- c(
  "dplyr",
  "ggplot2",
  "highcharter",
  "shiny", "shinyjs", "shinyWidgets"
) 
lapply(pkgs, library, character.only = TRUE)

SESSION INFO

> sessionInfo()
R version 3.5.0 (2018-04-23)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows >= 8 x64 (build 9200)

Matrix products: default

locale:
[1] LC_COLLATE=French_France.1252  LC_CTYPE=French_France.1252    LC_MONETARY=French_France.1252 LC_NUMERIC=C                   LC_TIME=French_France.1252  



attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shinyWidgets_0.4.3 shinyjs_1.0        plotly_4.8.0       leaflet_2.0.2      DT_0.4             dplyr_0.7.6        ggplot2_3.0.0      highcharter_0.5.0  shiny_1.1.0       

loaded via a namespace (and not attached):
 [1] zoo_1.8-4         tidyselect_0.2.4  purrr_0.2.5       lattice_0.20-35   colorspace_1.3-2  viridisLite_0.3.0 htmltools_0.3.6   yaml_2.2.0        rlang_0.2.2       later_0.7.5       pillar_1.3.0     
[12] withr_2.1.2       glue_1.3.0        TTR_0.23-4        bindrcpp_0.2.2    bindr_0.1.1       plyr_1.8.4        quantmod_0.4-13   stringr_1.3.1     munsell_0.5.0     gtable_0.2.0      htmlwidgets_1.3  
[23] evaluate_0.11     labeling_0.3      knitr_1.20        crosstalk_1.0.0   Cairo_1.5-9       httpuv_1.4.5      curl_3.2          broom_0.5.0       xts_0.11-1        Rcpp_0.12.19      xtable_1.8-3     
[34] promises_1.0.1    backports_1.1.2   scales_1.0.0      jsonlite_1.5      mime_0.6          digest_0.6.17     stringi_1.2.4     rlist_0.4.6.1     grid_3.5.0        rprojroot_1.3-2   tools_3.5.0      
[45] magrittr_1.5      lazyeval_0.2.1    tibble_1.4.2      crayon_1.3.4      tidyr_0.8.1       pkgconfig_2.0.2   data.table_1.11.8 lubridate_1.7.4   httr_1.3.1        assertthat_0.2.0  rmarkdown_1.10   
[56] rstudioapi_0.8    R6_2.3.0          igraph_1.2.2      nlme_3.1-137      compiler_3.5.0

Could you include your html head? Maybe there are duplicated dependencies. — SeGa, Oct 08 '18 at 23:06
@SeGa : Indeed, the issue is due to conflicting dependencies. I enriched my initial post with html head, calls to javascript (in index.html), and the libraries I load from global.R. Thank you very much in advance for your views on this! — cho7tom, Oct 09 '18 at 09:47
Shiny loads its version of jquery and you load another jquery lib. They are obviously in conflict. You could try to load all dependencies by yourself, without `{{ headContent() }}` and omit the shiny jquery. — SeGa, Oct 09 '18 at 09:53
ok I see. Thank you @Sega. In such a case, how can I know the 'underlying' dependencies managed by {{ headContent() }}, so as to manually insert them in my index.html? — cho7tom, Oct 09 '18 at 11:50

SeGa · Accepted Answer · 2018-10-09T12:26:38.050

Based on this simplistic htmlTemplate you can check out which libraries are loaded when using {{ headContent() }}.

library(shiny)

html= '
<head>
{{ headContent() }}
</head>'

ui <- htmlTemplate(text_ = html)
server <- function(input, output){}

shinyApp(ui, server)

This is the resulting Html-head:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.12.4];shiny[1.1.0]</script>
  <script src="shared/json2-min.js"></script>
  <script src="shared/jquery.min.js"></script>
  <link href="shared/shiny.css" rel="stylesheet">
  <script src="shared/shiny.min.js"></script>
</head>

In your case you have to remove this line, since you load another version of jquery.

<script src="shared/jquery.min.js"></script>

So, without {{ headContent() }} those are the libraries you need to include in the html-head. Although I am not sure if shiny will work with your jquery library. You will have to test that.

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.12.4];shiny[1.1.0]</script>
  <script src="shared/json2-min.js"></script>
  <link href="shared/shiny.css" rel="stylesheet">
  <script src="shared/shiny.min.js"></script>

Thank you very much @SeGa, very helpful. I indeed had to remove the line you pointed (v1.12.4 of jquery) and to position my 'call' to jquery (v3.1.0) in the head section rather than in the end of the body section. It seems jquery fortunately takes care of backward compatibility... — cho7tom, Oct 09 '18 at 22:17

highcharter integration in R Shiny "html template"-based application

1 Answers1

Linked