CODEWITHSUNDEEP
rshiny
Selcuk Akbas
Selcuk Akbas

Reputation: 711

shiny htmlOutput doesn't react on second input change

I have shinyapp to generate google word tree visualisation. shinyapp interface has two inputs. text and term. I subset data.frame for selected text and replace required content in html template.

Template is here https://developers.google.com/chart/interactive/docs/gallery/wordtree

The problem is, shinyapp changes only once. When I change text or term second time, html page goes white. When I check file on folder, I see that html file content changes but It doesn't show up on shiny page.

app.R

shinyApp(
  ui = fluidPage(
    fluidRow(
      column(width = 6,  selectInput("input.filter", label = "selec text", choices = mytexts$yazi.header, selected = "text 1")) ,
      column(width = 6,textInput("input.term", "type term", "today"))
      ),
    fluidRow(tags$head(titlePanel("title panel"))),
    fluidRow(htmlOutput("treehtml")) 
  ) ,
server = function(input, output, session) { 
  output$treehtml <- reactive({
    print(input$input.filter)
    print(input$input.term)
    xid <- subset(mytexts, yazi.header == if(is.null(input$input.filter)) {"text 1"} 
                  else {input$input.filter} ) 
    print(xid$L1)
    xxwt <- mytexts.cumle[mytexts.cumle$cumleid == xid$L1, ]
    xxwt <- paste("['", paste(xxwt$clean, collapse = "'], ['"), "'],", sep = "")
    wttemp <- paste(readLines("wordtree/_wordtree_tmp.html"), collapse="\n")
    wttemp <- gsub("today",input$input.term, wttemp, fixed = TRUE)
    wttemp <- gsub("['DEMO1 DEMO2 DEMO3'],",xxwt, wttemp, fixed = TRUE)
    write(wttemp, "wordtree/wttemp.html")
    wttemp
    })
})

wordtree/_wordtree_tmp.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:['wordtree']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable(
        [ ['DEMO DEMO DEMO'], ]
      );

      var options = {
        wordtree: {
          format: 'implicit',
          type: 'double',
          word: 'today'
        }
      };

      var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
      chart.draw(data, options);
    }
    </script>
</head>
<body>
      <div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>

Upvotes: 0

Views: 607

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84529

You can do as follows for example, using the function runjs of shinyjs.

library(shiny)
library(shinyjs)
library(jsonlite)

sentences <- data.frame(
  group = c("A","A","A","A","A","A","A","A","A","A","B","B","B","B","B","B","B","B","B"),
  sentence = c("Phrases", "cats are better than dogs", "cats eat kibble", 
               "cats are better than hamsters", "cats are awesome", "cats are people too", 
               "cats eat mice", "cats meowing", "cats in the cradle", "cats eat mice", 
               "cats in the cradle lyrics", "cats eat kibble", "cats for adoption", 
               "cats are family", "cats eat mice", "cats are better than kittens", 
               "cats are evil", "cats are weird", "cats eat mice"),
  stringsAsFactors = FALSE
)    

drawChart <- function(sentences, word){
  sprintf("google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable(
          %s
  );

  var options = {
    wordtree: {
      format: 'implicit',
      word: '%s'
    }
  };

  var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
  chart.draw(data, options);
}
", toJSON(sentences), word)
}

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$script(src="https://www.gstatic.com/charts/loader.js")
    ),
    useShinyjs(),
    fluidRow(
      column(width=6, 
        selectInput("filter", label="select group", choices=c("A","B"), selected="A", selectize=FALSE)
      ),
      column(width=6, 
        textInput("word", "type word", "cats")
      )
    ),
    fluidRow(tags$head(titlePanel("title panel"))),
    fluidRow(tags$div(id="wordtree_basic", style="width: 900px; height: 500px;")) 
  ),

  server = function(input, output, session) { 
    observe({
      dat <- subset(sentences, group==input$filter)$sentence
      sentences <- array(dat, dim=c(length(dat),1))
      runjs(drawChart(sentences, input$word))
    })
  }
)

enter image description here

enter image description here

Upvotes: 1

Related Questions