Menu
I can see how ggvis, rCharts, etc. fits in with a server.r + ui.r construction. I'm now trying to make an HTML UI but am and unable to find any clues about passing an interactive chart to an HTML UI. Any clues?
Investigated for ggvis, rCharts, NBD3. Not investigated for plotly. Avoiding googleVis.
A similar question has been asked before, by an Evan Farrell, but with no response - https://groups.google.com/forum/#!topic/ggvis/GsZQRl3VOZ4
Edit: Do these need custom binding? Any simpler alternatives? I thought the output would be javascript produced SVG, so is it not possible for the libraries to be included manually and the SVG just bound to a div element?
Edit 2: Could I pass my dataset to the UI somehow and build say a D3 chart in index.html itself
638
You can use HTML to customize your Shiny apps. Every Shiny app is built on an HTML document that creates the apps’ user interface. Usually, Shiny developers create this document by building the ui object with R functions that build HTML output. However, you can supply HTML output directly with Shiny’s tags object.
The UI calls R functions that output HTML code. Shiny turns this code into a web app. I will use the 01_hello app throughout this article as an example. You can access this app by running: Many Shiny apps come with a ui object that determines the layout of the app. The ui object for 01_example looks like the following code:
Shiny developers can provide this document as an index.html file or assemble it from R code in their ui object. The UI calls R functions that output HTML code. Shiny turns this code into a web app. I will use the 01_hello app throughout this article as an example. You can access this app by running:
Adding interactive plots is one of the most important capabilities to include in a Shiny app. Sadly though, it seems that very few do it. If we wish to offer an alternative to enterprise reporting and BI tools by using Shiny, we need to do our best to match the interactivity those other tools seem to offer out of the box.
You can find here examples such as which is shiny with ggvis:
library(shiny)
library(ggvis)
runApp(list(
ui={
library(ggvis)
shinyUI(pageWithSidebar(
div(),
sidebarPanel(
sliderInput("n", "Number of points", min = 1, max = nrow(mtcars),
value = 10, step = 1),
uiOutput("plot_ui")
),
mainPanel(
htmlOutput("ggvis_plot"),
tableOutput("mtc_table")
)
))
},
server={
library(ggvis)
shinyServer(function(input, output, session) {
output$ggvis_plot <- renderUI({
ggvisOutput("plot1")
})
# A reactive subset of mtcars
mtc <- reactive({ mtcars[1:input$n, ] })
# A simple visualisation. In shiny apps, need to register observers
# and tell shiny where to put the controls
mtc %>%
ggvis(~wt, ~mpg) %>%
layer_points() %>%
bind_shiny("plot1")
output$mtc_table <- renderTable({
mtc()[, c("wt", "mpg")]
})
})
}
))
To convert it to a html-UI, shiny project you would need to create a directory with the following structure (as described here, as pointed by hvollmeier):
<shinnyappName>
|-- www
|-- index.html
|-- server.R
The server part will remain the same. For our example the index.html part would be something like:
<!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.11.0];shiny[0.11.1];ionrangeslider[2.0.2];bootstrap[3.3.1]</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>
<link href="shared/ionrangeslider/css/normalize.css" rel="stylesheet" />
<link href="shared/ionrangeslider/css/ion.rangeSlider.css" rel="stylesheet" />
<link href="shared/ionrangeslider/css/ion.rangeSlider.skinShiny.css" rel="stylesheet" />
<script src="shared/ionrangeslider/js/ion.rangeSlider.min.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 class="container-fluid">
<div class="row">
<div></div>
</div>
<div class="row">
<div class="col-sm-4">
<form class="well">
<div class="form-group shiny-input-container">
<label class="control-label" for="n">Number of points</label>
<input class="js-range-slider" id="n" data-min="1" data-max="32" data-from="10" data-step="1" data-grid="true" data-grid-num="7.75" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" data-keyboard-step="3.2258064516129"/>
</div>
<div id="plot_ui" class="shiny-html-output"></div>
</form>
</div>
<div class="col-sm-8">
<div id="ggvis_plot" class="shiny-html-output"></div>
<div id="mtc_table" class="shiny-html-output"></div>
</div>
</div>
</div>
</body>
</html>
Which you should write or you could get if you save the html page generated by the shinyUI as index.html and modify it to your needs as well as remove anything extra and undesirable.
library(shiny)
runApp("<shinyAppName>")
answered Oct 11 '22 11:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With