Binding two ECharts without connect

shiny.bind2

library(shiny)
library(tidyverse)
library(echarty)

ui <- fluidPage( 
  HTML("Binding two charts on <b>inside zoom</b> only<br />
       Tooltips could be bound too, by `axis`<br />
       Alternative to ECharts <a href='https://echarts.apache.org/en/api.html#echarts.connect'>connect</a><br />
       Solution adapted from <a href='https://github.com/apache/echarts/blob/12f6620c25eb96faa3e9f9fbc13a076c3c8bdbbc/test/connect-manually.html'>this code</a>"),
  tags$head(tags$script(HTML("
    function bindAction(chartList) {
      echarts.util.each(chartList, function (fromChart) {
          echarts.util.each(chartList, function (toChart) {
            if (fromChart === toChart) {
                return;
            }

            fromChart.on('updateAxisPointer', function (params) {
                toChart.dispatchAction(
                    toChart.makeActionFromEvent(params),
                    true
                );
            });

            fromChart.on('dataZoom', function (params) {
                toChart.dispatchAction({
                    type: 'dataZoom',
                    dataZoomIndex: params.batch[0].dataZoomIndex,
                    start: params.batch[0].start,
                    end: params.batch[0].end
                }, true);
            });
          });
      });
    };
    /*
    setTimeout(()=>{
      let ch1 = get_e_charts('chart1');
      let ch2 = get_e_charts('chart2');
      bindAction([ch1, ch2]); 
    }, 500);
    */
  "))),  # global js
  
  fluidRow(column(6, ecs.output('chart1', height='300')),
           column(6, ecs.output('chart2', height='300'))
  #                 ,actionButton("jsrun", "jsrun"))
  )
)

server <- function(input, output, session) {
  js <- "      
    let ch1 = get_e_charts('chart1');
    let ch2 = get_e_charts('chart2');
    bindAction([ch1, ch2]); 
  "
  some_data <- tibble(
    x = sample(1:100, 33),
    y = sample(1:100, 33)
  )
  
  output$chart1 <- ecs.render({
    p <- cars %>% ec.init()
    p$x$opts$tooltip <- list(ey='') 
    p$x$opts$dataZoom <- list(type='inside') 
    p
  })
  output$chart2 <- ecs.render({
    p <- some_data %>% ec.init()
    p$x$opts$tooltip <- list(ey='')          # list(trigger='axis', formatter='{c}')
    p$x$opts$dataZoom <- list(type='inside') # list(type='slider', start=50)
    p %>% htmlwidgets::onRender(paste("(function () {",js,"})"))  # better than setTimeout!
  })
  
  observeEvent(input$jsrun, {   # ok but needs manual activation
    p <- ecs.proxy('chart1')
    p$x$opts$code = htmlwidgets::JS(js)
    p %>% ecs.exec('p_js')
  })
}
shinyApp(ui = ui, server = server)

# solving https://github.com/JohnCoene/echarts4r/issues/340

JavaScript solution to a problem reported by @szmsu2011
Three code variations :

• with proxy p_js command (manual)
• with JS setTimeout - some guessing on the delay ms
• with onRender - best so far!