Alessandro Solbiati Alessandro Solbiati - 1 month ago 19
R Question

Shiny with HTML UI - how to choose classes for specific htmlwidget outputs (like dygraphs or others)

I am having some problems trying to go from the UI.R version of the user interface of a Shiny application to the HTML one.

It's quite clear that in place of function like


i need to make a div with the following classes

<div class="shiny-text-output" id="name"></div>
<div class="shiny-html-output" id="name"></div>

I really don't get what class I should put in my html when i want to replace an output function like the ones from the htmlwidgets package, for instance Dygraphs.


<div class="dygraphs html-widget html-widget-output" style="width:100%; height:400px;" id="dygraph" width="100%" height="400px"></div>

this doesn't work for instance. ( I took it looking at the class attributed by the inspecting element with my browser.

Thus, my question is: what class do I need to put if I want to reference to a specific output function from the htmlwidgets package, specifically Dygraph?

I report here the code I am trying to work on (is the first example of the Dygraph project presentation page )


shinyServer(function(input, output) {

predicted <- reactive({
hw <- HoltWinters(ldeaths)
predict(hw, n.ahead = input$months,
prediction.interval = TRUE,
level = as.numeric(input$interval))

output$dygraph <- renderDygraph({
dygraph(predicted(), main = "Predicted Deaths/Month") %>%
dySeries(c("lwr", "fit", "upr"), label = "Deaths") %>%
dyOptions(drawGrid = input$showgrid)


in the Ui.R using the tags$div(class= "... ") to simulate how it will be in my index.html



titlePanel("Predicted Deaths from Lung Disease (UK)"),

numericInput("months", label = "Months to Predict",
value = 72, min = 12, max = 144, step = 12),
selectInput("interval", label = "Prediction Interval",
choices = c("0.80", "0.90", "0.95", "0.99"),
selected = "0.95"),
checkboxInput("showgrid", label = "Show Grid", value = TRUE)
tags$div(class="dygraphs html-widget html-widget-output shiny-html-output", style="width:100%; height:400px;", id="dygraph", width="100%", height="400px")


This is what I have inside the tag:


      <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];babel-polyfill[6.7.2];shiny[0.14];selectize[0.11.2];htmlwidgets[0.7];dygraphs[1.1.1];moment[2.8.4];moment-timezone[0.2.5];dygraphs-binding[0.9];bootstrap[3.3.7]</script><script src="shared/json2-min.js"></script>
    <script src="shared/jquery.min.js"></script>
    <script src="shared/babel-polyfill.min.js"></script>
    <link href="shared/shiny.css" rel="stylesheet" />
    <script src="shared/shiny.min.js"></script>
    <link href="shared/selectize/css/selectize.bootstrap3.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script src="shared/selectize/js/es5-shim.min.js"></script>
    <script src="shared/selectize/js/selectize.min.js"></script>
    <script src="htmlwidgets-0.7/htmlwidgets.js"></script>
    <link href="dygraphs-1.1.1/dygraph.css" rel="stylesheet" />
    <script src="dygraphs-1.1.1/dygraph-combined.js"></script>
    <script src="moment-2.8.4/moment.js"></script>
    <script src="moment-timezone-0.2.5/moment-timezone-with-data.js"></script>
    <script src="dygraphs-binding-0.9/dygraphs.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>  <title>Predicted Deaths from Lung Disease (UK)</title>