Menu
I'm creating a dashboard with R and D3 running with library(shiny).
This works wonderfully well and now i want turn the D3 code into modular objects which will save me a lot of coding and makes it usable by others. My idea is to get to this:
<r-d3-gauge id="G1" data="[1,2,3]"></r-d3-gauge>
<r-d3-gauge id="G2" data="[4,5,6]"></r-d3-gauge>
And i have the two gauges that i can position with CSS or just inject them into shiny with HTML(....). Ok this should be simple using AngularJS.
But i can not get AngularJS to work in R shiny. I made this test code: (a www folder with d3.js and angular.min.1.4.3.js next to server.r/ui.r)
ui.r
library(shiny)
shinyUI(fluidPage(
tags$head(tags$script(src = "d3.js"))
,tags$head(tags$script(src = "angular.min.1.4.3.js"))
,htmlOutput("JS")
,htmlOutput("HTML")
))
server.r
library(shiny)
shinyServer(function(input, output) {
# HTML
output$HTML <- renderUI({
html <- ''
html <- paste0(html,'
<p>Input something in the input box:</p>
<h4>Name: <input type="text" ng-model="name"></h4>
<h4 ng-bind="name"></h4>
<h4>Name: <input type="text" ng-model="name2"></h4>
<h4>You wrote: {{name2}}</h4>
')
HTML(html)
})
# JS
output$JS <- renderUI({
html <- "<script language='JavaScript'>"
html <- paste0(html,'
if(typeof angular == "undefined") {
console.log("angular == undefined");
} else {
console.log("angular == defined");
console.log(angular.version.full)
}
if (window.jQuery) {
console.log("jQuery == defined");
console.log(jQuery.fn.jquery);
} else {
console.log("jQuery == undefined");
}
d3.select("body")
.attr("ng-app","")
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>')
HTML(html)
})
})
This creates a shiny app with html code that is fine, the test shows that
angular == defined
1.4.3
jQuery == defined
2.1.4
So no problem there. jQuery works fine (you can click on "Input something in the input box:" and it is hidden) but if i enter text it does not show up. If i try something like:
<p>Name: <input type="text" ng-model="name2"></p>
<p>You wrote: {{ name2 }}</p>
it wil show You wrote: {{ name2 }} without subsetting the {{name2}} part.
765
OK this works:
ui.r
library(shiny)
shinyUI(bootstrapPage(includeHTML("static.html")))
server.r
library(shiny)
shinyServer(function(input, output) {})
static.html
<!DOCTYPE HTML>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
</head>
<body>
<script language='JavaScript'>
if(typeof angular == "undefined") {
console.log("angular == undefined");
} else {
console.log("angular == defined");
console.log(angular.version.full)
}
if (window.jQuery) {
console.log("jQuery == defined");
console.log(jQuery.fn.jquery);
} else {
console.log("jQuery == undefined");
}
d3.select("body").attr("ng-app","")
</script>
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<h4>Name: <input type="text" ng-model="name2"></h4>
<h4>You wrote: {{name2}}</h4>
</body>
</html>
Et voila, Up and Running ! :^)
192
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