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
