How to manipulate shiny server response with javascript

StackOverflow https://stackoverflow.com/questions/22931700

  •  29-06-2023
  •  | 
  •  

Question

Here is a UI written with jquery mobile & highcharts. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1 " charset="UTF-8" >
  <link rel="stylesheet" href="shared/jquery.mobile-1.4.2.min.css" />
  <script src="shared/jquery.js" type="text/javascript"></script>
  <script src="shared/jquery.mobile-1.4.2.min.js" type="text/javascript" > </script> 
  <script src="shared/shiny.js" type="text/javascript"></script>
  <script src="shared/highcharts.js" type="text/javascript"></script>
  <script src="shared/data.js" type="text/javascript"></script>
  <script src="shared/exporting.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
  <script type="text/javascript">

$(function () {

    $('#mygraph').highcharts({
        data: {
            table: document.getElementById("datatable")
        },
        chart: {
            type: 'column'
        },
        title: {
            text: "Data extracted from an HTML balise"
        }
    });

});
    </script>
</head>

<body>

  <h1>HTML UI with jquery mobile & Shiny:</h1>
  <div class="ui-grid-a">
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" >
  <p>
    <strong>Distribution:</strong>
    <select name="dist" data-native-menu=false >
      <option value="norm">Normal</option>
      <option value="unif">Uniform</option>
      <option value="lnorm">Log-normal</option>
      <option value="exp">Exponential</option>
    </select> 
    <strong>Number of observation:</strong>
    <input maxlength="4" type="number" name="n"   />
  </p>
 <p>
    <strong>Summary of the distribution:</strong>
  </p>
  <pre id="summary" class="shiny-text-output"></pre> 
  </p>
  <input data-inline=true type="button" value="CLICK ME TO DISPLAY SERVER RESPONSE" onclick='alert(document.getElementById("table"));'/>
  <p>
  </div></div>
   <div class="ui-block-b"><div class="ui-bar ui-bar-a" >
  <div id="mygraph" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  <table id="datatable">
  <thead>
        <tr>
            <th>Fruits</th>
            <th>Jane</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Apples</th>
            <td>3</td>
        </tr>
        <tr>
            <th>Pears</th>
            <td>2</td>  
        </tr>
        <tr>
            <th>Plums</th>
            <td>5</td>
        </tr>
        <tr>
            <th>Bananas</th>
            <td>1</td>  
        </tr>
        <tr>
            <th>Oranges</th>
            <td>2</td>  
        </tr>
    </tbody>
</table>
<div id="table" name="mytable" class="shiny-html-output"></div>
</div></div>
</div>
</body>
</html>

#

and here is the server side written with shiny r package:

library(shiny)

# Define server logic for random distribution application
shinyServer(function(input, output) {
  data <- reactive({
    dist <- switch(input$dist,
                   norm = rnorm,
                   unif = runif,
                   lnorm = rlnorm,
                   exp = rexp,
                   rnorm)

    dist(input$n)

  })


  # Generate a summary of the data
  output$summary <- renderPrint({
    summary(data())
  })

  # Generate an HTML table view of the data
  output$table <- renderTable({
    data.frame(x=data())
    })

})

#

My problem is that I can't access shiny output values with this javascript function 

document.getElementById("table")

where table is the id of a div element in the html document that receives and display correctly shiny server response. It just says me it is an HTLMDiv element or an HTMLTable element. Further, figure isn't displayed using bar chart from highcharts library (for now, I prefer using highcharts instead of rCharts).

Same problem occurs when I try to access html table with predefined values with: $('#datatable').val() [1] or document.getElementById("datatable") or whatever number. It returns null (click at "CLICK ME TO DISPLAY SERVER RESPONSE" to see what it gives).

The only difference is that figure is correctly displayed in this case after passing document.getElementById("datatable") (where datatable is the id of html table) parameter to the highcharts function.

Last, even if figure is displayed as expected, how to make sure that highcharts will be reactive?

Could someone help me to figure out what's wrong with my code?

Thanks,

NB: in order to display correctly this example; you need to download the following js and css libraries: jquery.mobile-1.4.2.min.css, jquery.mobile-1.4.2.min.js, highcharts.js, data.js, exporting.js (the last 3 js are in the highcharts library)

Was it helpful?

Solution

I'm able to view (onclick) values stored in the HTMLDiv when changing document.getElementById("table") into $(".shiny-html-output").html() but manipulate and plot data is still a problem. Surprisingly, data are stored in an html table of class data table table-bordered table-condensed generated with xtable.

However, data is still unavailable when trying $(".data table table-bordered table-condensed").val()

UPDATE:

rCharts is powerful!, you may rewrite your Shiny app with rCharts as It contains code to reproduce bar chart a la Highcharts like this one: http://rstudio-pubs-static.s3.amazonaws.com/5548_c3b680696b084e5db17eecf8c079a3c1.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top