Arrange & Connect

Basics

Since version 0.1.2 you can connect multiple two charts together which might make it even easier. Below we create two charts, with e_datazoom, hiding one of the latter. On the second chart we run e_connect to connect it with the other; sliders are now linked.

You can link charts together in two different ways, one with e_connect by refering other charts’s id (elementId)

e1 <- mtcars |> 
  e_charts(
    mpg,
    height = 200,
    elementId = "chart1" # specify id
  ) |> 
  e_scatter(wt) |> 
  e_datazoom(show = FALSE) # hide

e2 <- mtcars |> 
  e_charts(
    wt,
    height = 200,
    elementId = "chart2" # specify id
  ) |> 
  e_scatter(qsec) |> 
  e_datazoom(show = FALSE) # hide
  
e3 <- mtcars |> 
  e_charts(
    qsec,
    height = 200
  ) |> 
  e_scatter(hp) |> 
  e_datazoom() |> 
  e_connect(c("chart1", "chart2")) # connect

You can browse the above from your console like so.

e_arrange(e1, e2, e3)

The package natively links interactions, therefore, in the following the legend is acutally unique, one legend will trigger on both charts because they bear the same name.

create_chart <- function(data, var){
  data |> 
    e_charts_(
        "mpg",
        height = 200
    ) |> 
    e_scatter_(var, name = "Click me!") |> 
    e_group("4charts") # all charts in the same group
}
e4 <- create_chart(mtcars, "hp")
e5 <- create_chart(mtcars, "wt")
e6 <- create_chart(mtcars, "drat")
e7 <- create_chart(mtcars, "qsec") |> 
  e_connect_group("4charts") # connect charts

e_arrange(e4, e5, e6, e7, rows = 2, cols = 2)

You can connect pretty much anything, including geospatial visualisations, it’ll work as long as they share one or more thing in common (i.e.: serie name).

library(echarts4r.maps)

USArrests$state <- row.names(USArrests)

e8 <- USArrests |> 
  e_charts(state, elementId = "US") |>
  em_map("USA") |> 
  e_map_3d(Murder, map = "USA", name = "Murder", boxWidth = 70) |> 
  e_visual_map(Murder)

# this is made up
UK <- data.frame(
  kingdoms = c("England", "Wales", "Nothern Ireland", "Scotland"),
  murder = c(.8, 5, 13.2, 17.4)
)

e9 <- UK |> 
  e_charts(kingdoms) |>
  em_map("United_Kingdom") |> 
  e_map_3d(murder, map = "United_Kingdom", name = "Murder", boxWidth = 50) |> 
  e_visual_map(murder, show = FALSE) |> 
  e_connect("US")

e_arrange(e8, e9, cols = 2, rows = 1)

On the geo-spatial visualisations above you can slide the visual map to filter states/kingdoms (because e_visual_map defaults to calculable = TRUE).

Shiny

There is no need for e_arrange in Shiny, though e_connect and e_arrange work hand in hand you can use one without the other. In fact you don’t truly have to use e_arrange in R markdown either.

Once the charts are connected they don’t need to be side by side.

library(shiny)
library(echarts4r)

ui <- fluidPage(
  fluidRow(
  column(5, echarts4rOutput("plot1")),
  column(2, "Charts are connected, no need for", code("e_arrange")),
  column(5, echarts4rOutput("plot2"))
  )
)

server <- function(input, output, session) {
  
  output$plot1 <- renderEcharts4r({
    cars |> 
      e_charts(
        speed,
        height = 200
      ) |> 
      e_scatter(dist, name = "legend") |> 
      e_datazoom(show = FALSE, y_index = 0) |> 
      e_group("grp")
  })
  
  output$plot2 <- renderEcharts4r({
    cars |> 
      e_charts(
        dist,
        height = 200
      ) |> 
      e_scatter(speed, name = "legend") |> 
      e_datazoom(y_index = 0) |> 
      e_group("grp") |>  # assign group
      e_connect_group("grp")
  })
  
}

shinyApp(ui, server)

John Coene

2024-02-16

Basics

Shiny