Update all dataset source with event listener – Blancer.com Tutorials and projects

I’m trying to update the dataset when I click on a button (btnTest), but the update function updateF2(); is not working when I click on this button. I need to update the entire dataset based on changes that occur. The variable is defined in r with jsonlite::toJSON(…). Full code:

library(shiny)

ui <- HTML(paste0(
  "<head>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js'></script>
  </head>

  <div style='display: grid; grid-template-columns: repeat(12, 1fr);'>

  <div style='grid-column: span 12;'>
  <div style='display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 15px;'>

  <div style='grid-column: span 6; background-color: #ff9000;'>
  <h2>Inputs</h5>
  <hr>
  <input id='input1' type='number' value='30'>
  <input id='input2' type='number' value='12'>
  <input id='input3' type='number' value='45'>
  <input id='input4' type='number' value='58'>
  <button id='btnTest'>Update</button>
  </div>

  <div id='testPlot' style='height: 400px; width: 400px;
  grid-column: span 6; display: block; margin: auto;'>",
  uiOutput(outputId = "outputTest"),
  "</div>

  </div>
  </div>

  </div>"
))

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

  output$outputTest <- renderUI({

    x <- jsonlite::toJSON(c("Milk tea", input$input1, input$input2, input$input3, input$input4))

    HTML(paste0(
      "<script>
      const testPlotUse = echarts.init(document.getElementById('testPlot'));

      // Definindo o JSON do dataset com o valor inicial do input value1
      let dataset = {
        source: [",
          x,
        "]
      };

      // update plot function
      function updateF1(dataset) {
        let option = {
          series: [{
            type: 'gauge',
            min: 0,
            max: 60,
            splitNumber: 6,
            data: [
              {value: dataset.source[0][1]},
              {value: dataset.source[0][2]},
              {value: dataset.source[0][3]},
              {value: dataset.source[0][4]},
            ]
          }]
        };
        testPlotUse.setOption(option);
      };

      function updateF2() {
        let dataset = {
          source: [",
            x,
          "]
        };
        updateF1(dataset);
      };

      $('#btnTest').on('click', function() {
        updateF2();
      });

      updateF2();

      </script>"
    ))

  })

}

shinyApp(ui, server)