Skip to content Skip to sidebar Skip to footer
Home / Html / R / Shiny

Shiny, Timevis And Html Templates

Post a Comment
i'm having a problem displaying a timevis in an html block in shiny. the following code is the base example which works: library(shiny) library(timevis) data <- data.frame( i

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:

loadedviaanamespace (and not attached):

 [1]Rcpp_0.12.11digest_0.6.12rprojroot_1.2mime_0.5R6_2.2.1backports_1.1.0xtable_1.8-2[8]jsonlite_1.5magrittr_1.5evaluate_0.10stringi_1.1.5rmarkdown_1.5tools_3.4.0stringr_1.2.0[15]htmlwidgets_0.8httpuv_1.3.3yaml_2.1.14rsconnect_0.8compiler_3.4.0htmltools_0.3.6knitr_1.16

HTML code produced by shiny app is:

<!DOCTYPE html><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><scripttype="application/shiny-singletons"></script><scripttype="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><scriptsrc="shared/json2-min.js"></script><scriptsrc="shared/jquery.min.js"></script><linkhref="shared/shiny.css"rel="stylesheet" /><scriptsrc="shared/shiny.min.js"></script><scriptsrc="htmlwidgets-0.8/htmlwidgets.js"></script><linkhref="vis-4.16.1/vis.min.css"rel="stylesheet" /><scriptsrc="vis-4.16.1/vis.min.js"></script><linkhref="timeline-0.4/timevis.css"rel="stylesheet" /><scriptsrc="timevis-binding-0.4/timevis.js"></script><metaname="viewport"content="width=device-width, initial-scale=1" /><linkhref="shared/bootstrap/css/bootstrap.min.css"rel="stylesheet" /><scriptsrc="shared/bootstrap/js/bootstrap.min.js"></script><scriptsrc="shared/bootstrap/shim/html5shiv.min.js"></script><scriptsrc="shared/bootstrap/shim/respond.min.js"></script></head><body><divid="page-content-wrapper"><divid="timeline"class="timevis html-widget html-widget-output"style="width:100%; height:auto; "><divclass="btn-group zoom-menu"><buttontype="button"class="btn btn-default btn-lg zoom-in"title="Zoom in">+</button><buttontype="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"