Shiny, Timevis And Html Templates
Solution 1:
I don't see anything wrong with your code. The only reason I can think of could be the out-dated packages: Here are the packages loaded for my session:
loaded via a namespace (and not attached):
[1] Rcpp_0.12.11 digest_0.6.12 rprojroot_1.2 mime_0.5 R6_2.2.1 backports_1.1.0 xtable_1.8-2
[8] jsonlite_1.5 magrittr_1.5 evaluate_0.10 stringi_1.1.5 rmarkdown_1.5 tools_3.4.0 stringr_1.2.0
[15] htmlwidgets_0.8 httpuv_1.3.3 yaml_2.1.14 rsconnect_0.8 compiler_3.4.0 htmltools_0.3.6 knitr_1.16
HTML code produced by shiny app is:
<!DOCTYPE html>
<html>
<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.0.3];htmlwidgets[0.8];vis[4.16.1];timeline[0.4];timevis-binding[0.4];bootstrap[3.3.7]</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>
<script src="htmlwidgets-0.8/htmlwidgets.js"></script>
<link href="vis-4.16.1/vis.min.css" rel="stylesheet" />
<script src="vis-4.16.1/vis.min.js"></script>
<link href="timeline-0.4/timevis.css" rel="stylesheet" />
<script src="timevis-binding-0.4/timevis.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/shim/html5shiv.min.js"></script>
<script src="shared/bootstrap/shim/respond.min.js"></script>
</head>
<body>
<div id="page-content-wrapper">
<div id="timeline" class="timevis html-widget html-widget-output" style="width:100%; height:auto; ">
<div class="btn-group zoom-menu">
<button type="button" class="btn btn-default btn-lg zoom-in" title="Zoom in">+</button>
<button type="button" class="btn btn-default btn-lg zoom-out" title="Zoom out">-</button>
</div>
</div>
</div>
</body>
</html>
Solution 2:
I have to thank my colleague @ZachA as my question was not entirely accurate, but there is very little documented out there, so it may be useful to others.
in order to add custom html to shiny apps there are several ways as documented on the R sites and articles (i.e. http://shiny.rstudio.com/articles/templates.html or http://shiny.rstudio.com/articles/html-ui.html).
there are tow ways to include files:
includehtml('yourfile') and htmlTemplate('yourfile')
this is where the problem is as the way the html is rendered is different and the inclusion or exclusion of headers in the source html files caused my problem, especially if you start mixing the two ways.
in my case using htmlTemplate seem to be the root cause; changing the call to file to includehtml solved it.
here is a bit of the code to explain
ui <- bootstrapPage(
tags$head(
tags$script(src='js/custom.js')
,tags$link(rel = "stylesheet", type = "text/css", href ='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css')
,tags$script(src='https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js')
,tags$script(src='http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js')
,tags$link(rel = "stylesheet", type = "text/css", href ='css/style.css')
,tags$link(rel = "stylesheet", type = "text/css", href ='css/myvis.css')
),
myuser = verbatimTextOutput("s_user"),
tags$div(id="wrapper",
tags$div(class="overlay"),
tags$nav(class="navbar navbar-inverse navbar-fixed-top", id="sidebar-wrapper", role="navigation", includeHTML("./sidebar.html")),
tags$div(id="page-content-wrapper", htmlTemplate("./main.html")),
tags$div(class="container",
tags$div(class="row",
tabsetPanel(type="pills",
tabPanel("Overview",
htmlTemplate("html_template/overview.html")
),
tabPanel("Streams",
includeHTML("html_template/streams.html")
),
tabPanel("Budget",
includeHTML("html_template/budget.html")
),
tabPanel("Status",
htmlTemplate("html_template/status.html")
),
tabPanel("Milestones",
includeHTML("html_template/milestones.html")
),
tabPanel("Risks",
htmlTemplate("html_template/risks.html")
)
)
)
)
)
)
as you can see using the bootstrapPage layout and adding the various libraries helped me resolve it (the stream.html file in the code). at the end, for maximum flexibility we coded the javascript inside the template and use shinyjs to populate the json object to draw the viz.
Post a Comment for "Shiny, Timevis And Html Templates"