R Shiny и интегрированные Google Charts - PullRequest
Новая
       70

R Shiny и интегрированные Google Charts

0 голосов
/ 14 февраля 2020

Я работаю над тем, чтобы научиться интегрировать Google Charts в приложение , не используя дополнительные издержки пакета , и самостоятельно вносить большинство вещей в приложение. Ниже приведен простой пример Hello World, который на данный момент содержит элементы, которые я хочу должным образом содержать в приложении.

Я пытаюсь узнать, как использовать данные , созданные в объекте tmp(), для заполнения таблицы данных, которую я создаю. Приложение, приведенное ниже, работает, но диаграммы заполняются на основе данных, жестко закодированных в объекте data.

Есть ли способ, которым мой может использоваться для заполнения массива данных?

минимальный воспроизводимый файл пользовательского интерфейса 

ui <- fluidPage(
    titlePanel("Hello Google Charts"),
    sidebarLayout(
        sidebarPanel(
            h1('Hello World')
        ),
    mainPanel(
        htmlTemplate("test3.html"),
        verbatimTextOutput('x')
        )
    )
)

минимальный воспроизводимый файл сервера 

server <- function(input, output) {
    tmp <- data.frame(v1 = rnorm(4), v2 = rnorm(4))
    output$x <- renderPrint({tmp})
}

HTML файл test3. html 

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {


        var data = google.visualization.arrayToDataTable([
          ['v1', 'v2'],
          ['1', -1.9372140],
          ['2', -1.5234370],
          ['3', 0.2374601],
          ['4', 1.0550744]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 75, redTo: 100,
          yellowFrom:50, yellowTo: 75,
          minorTicks: 10
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 10000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 100);
        setInterval(function() {
          data.setValue(2, 1, 10 );
          chart.draw(data, options);
        }, 100);
      }
    </script>
  </head>

  <body>
    <div id="chart_div" style="width: 400px; height: 120px;">
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 14 февраля 2020

Чтобы отправить что-то из R в JavaScript, вы должны использовать Shiny.addCustomMessageHandler в скрипте JavaScript и session$sendCustomMessage на сервере Shiny (см. ?shiny::session).

Здесь это рабочее приложение.

JavaScript файл блестящийHandler. js, чтобы поместить в подпапку www*1011* приложения: 

$(document).ready(function(){
  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart(data) {

    var options = {
      width: 400, 
      height: 120,
      redFrom: 75, 
      redTo: 100,
      yellowFrom:50, 
      yellowTo: 75,
      minorTicks: 10
    };

    var chart = 
      new google.visualization.Gauge(document.getElementById("chart_div"));

    var gdata = new google.visualization.DataTable(data);
    chart.draw(gdata, options);

/*    setInterval(function() {
      gdata.setValue(0, 1, 40 + Math.round(60 * Math.random()));
      chart.draw(gdata, options);
    }, 10000);
    setInterval(function() {
      gdata.setValue(1, 1, 40 + Math.round(60 * Math.random()));
      chart.draw(gdata, options);
    }, 100);
    setInterval(function() {
      gdata.setValue(2, 1, 10 );
      chart.draw(gdata, options);
    }, 100); */
  } 

  Shiny.addCustomMessageHandler("chart", function(data){drawChart(data);});

});

И блестящий приложение: 

library(shiny)

dataframe2datatable <- function(dat){
  list(
    rows = lapply(1:nrow(dat), function(i){
      list(c = lapply(unname(as.list(dat[i,])), function(x) list(v = x)))
    }),
    cols = lapply(names(dat), function(x){
      list(
        label = x, 
        type = ifelse(mode(dat[[x]]) == "character", "string", "number")
      )
    })
  ) 
}

dat <- data.frame(
  v1 = as.character(1:4),
  v2 = rnorm(4),
  stringsAsFactors = FALSE
)

ui <- fluidPage(
  tags$head(
    tags$script(src = "https://www.gstatic.com/charts/loader.js"),
    tags$script(src = "shinyHandler.js")
  ),
  br(),
  actionButton("draw", "Draw chart"),
  br(),
  div(id = "chart_div")
)

server <- function(input, output, session){

  observeEvent(input[["draw"]], {
    session$sendCustomMessage("chart", dataframe2datatable(dat))
  })

}

shinyApp(ui, server)

enter image description here

...