找到你要的答案

Q:Render a javascript in R shiny

Q:在R闪亮的JavaScript渲染

I'm trying to use the Google Visualization API Gadgets inside a shiny app. I think that this question could be helpful for other javascript uses. I'd like to insert this gadget (http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/doc.html) inside my app. The problem is how to pass the dynamic javascript to my shiny app. This is my attempt:

 library(shiny)

runApp(list(

ui=
    shinyUI(fluidPage(

                titlePanel("example"),
                 fluidRow(column(3,wellPanel(
                        sliderInput("n", "N:", min = 10, max = 1000, value = 200,step = 10)
                                    )),
                        column(6, verbatimTextOutput("text")
                                    )),
                uiOutput("my_script")   

             )) ,

server=
        function(input, output, session) {

        output$text <- renderText({
           paste("Input is:", input$n)
                    })

        output$my_script<-renderUI({
                    HTML(paste("
                    <link rel=\"stylesheet\" type=\"text/css\" href=\"http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.css\"/>
                              <script type=\"text/javascript\" src=\"http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.js\"></script>
                              <script type=\"text/javascript\" src=\"http://www.google.com/jsapi\"></script>

                     <div id=\"chartdiv\"></div>

                            <script type=\"text/javascript\">
                                 google.load(\"visualization\", \"1\");
                                 google.setOnLoadCallback(drawChart);
                                                  var chart;
                                      function drawChart() {
                          var data = new google.visualization.DataTable();
                          data.addColumn('string', 'Label');
                         data.addColumn('number', 'Value');
                                    data.addRows(1);
                         data.setCell(0, 0, 'Value');
                         data.setCell(0, 1,",   input$n ,", 'up');
                         var chartDiv = document.getElementById('chartdiv');
                         var options = {title: 'My ploy',currency:'EUR',canSelect:false,max:1000,min:10};
                         chart = new PilesOfMoney(chartDiv);
                          chart.draw(data, options);
                               //google.visualization.events.addListener(chart, 'select', handleSelect);
                                          }
                                </script>"  
                                        ,sep=""))
                                    })


}))

I created the dynamic table inside the javascript. The plot should change by input$n. But doesn't work! If you uncomment uiOutput("my_script") the shiny app crashes.

Update:

I changed my code with another attempt but it doesn't work! Anyway if I run just the HTML code it works:

<html>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.css"/>
                              <script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.js"></script>
                              <script type="text/javascript" src="http://www.google.com/jsapi"></script>

 <div id="chartdiv"></div>

                            <script type="text/javascript">
                                 google.load("visualization", "1");
                                 google.setOnLoadCallback(drawChart);
                                                  var chart;
                                      function drawChart() {
                          var data = new google.visualization.DataTable();
                          data.addColumn('string', 'Label');
                         data.addColumn('number', 'Value');
                                    data.addRows(1);
                         data.setCell(0, 0, 'Value');
                         data.setCell(0, 1,500, 'up');
                         var chartDiv = document.getElementById('chartdiv');
                         var options = {title: 'My ploy',currency:'EUR',canSelect:false,max:1000,min:10};
                         chart = new PilesOfMoney(chartDiv);
                          chart.draw(data, options);
                               //google.visualization.events.addListener(chart, 'select', handleSelect);
                                          }
                                </script>

</html>

I'm trying to use the Google Visualization API Gadgets inside a shiny app. I think that this question could be helpful for other javascript uses. I'd like to insert this gadget (http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/doc.html) inside my app. The problem is how to pass the dynamic javascript to my shiny app. This is my attempt:

 library(shiny)

runApp(list(

ui=
    shinyUI(fluidPage(

                titlePanel("example"),
                 fluidRow(column(3,wellPanel(
                        sliderInput("n", "N:", min = 10, max = 1000, value = 200,step = 10)
                                    )),
                        column(6, verbatimTextOutput("text")
                                    )),
                uiOutput("my_script")   

             )) ,

server=
        function(input, output, session) {

        output$text <- renderText({
           paste("Input is:", input$n)
                    })

        output$my_script<-renderUI({
                    HTML(paste("
                    <link rel=\"stylesheet\" type=\"text/css\" href=\"http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.css\"/>
                              <script type=\"text/javascript\" src=\"http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.js\"></script>
                              <script type=\"text/javascript\" src=\"http://www.google.com/jsapi\"></script>

                     <div id=\"chartdiv\"></div>

                            <script type=\"text/javascript\">
                                 google.load(\"visualization\", \"1\");
                                 google.setOnLoadCallback(drawChart);
                                                  var chart;
                                      function drawChart() {
                          var data = new google.visualization.DataTable();
                          data.addColumn('string', 'Label');
                         data.addColumn('number', 'Value');
                                    data.addRows(1);
                         data.setCell(0, 0, 'Value');
                         data.setCell(0, 1,",   input$n ,", 'up');
                         var chartDiv = document.getElementById('chartdiv');
                         var options = {title: 'My ploy',currency:'EUR',canSelect:false,max:1000,min:10};
                         chart = new PilesOfMoney(chartDiv);
                          chart.draw(data, options);
                               //google.visualization.events.addListener(chart, 'select', handleSelect);
                                          }
                                </script>"  
                                        ,sep=""))
                                    })


}))

我创造了在JavaScript动态表。情节应该改变输入$ N.但不工作!如果你取消UIOutput(“my_script”)闪亮的应用程序崩溃。

Update:

我改变了我的代码与另一个尝试,但它不工作!如果我刚刚运行的HTML代码,它的作品:

<html>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.css"/>
                              <script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.js"></script>
                              <script type="text/javascript" src="http://www.google.com/jsapi"></script>

 <div id="chartdiv"></div>

                            <script type="text/javascript">
                                 google.load("visualization", "1");
                                 google.setOnLoadCallback(drawChart);
                                                  var chart;
                                      function drawChart() {
                          var data = new google.visualization.DataTable();
                          data.addColumn('string', 'Label');
                         data.addColumn('number', 'Value');
                                    data.addRows(1);
                         data.setCell(0, 0, 'Value');
                         data.setCell(0, 1,500, 'up');
                         var chartDiv = document.getElementById('chartdiv');
                         var options = {title: 'My ploy',currency:'EUR',canSelect:false,max:1000,min:10};
                         chart = new PilesOfMoney(chartDiv);
                          chart.draw(data, options);
                               //google.visualization.events.addListener(chart, 'select', handleSelect);
                                          }
                                </script>

</html>
javascript  html  r  google-visualization  shiny