display svg for radarchart

[jgraille]

Hello,

I would like to use svg files to display as axis values in a radar chart. I tried to refer to this https://echarts.apache.org/examples/en/editor.html?c=bar-rich-text without success. I used e_axis(formatter=htmlwidgets::JS("function (symbol) { return '{' + symbol + '}';"))

Here's an exemple:

library(shiny)
library(echarts4r)

ui <- fluidPage(

  column(width = 12, echarts4rOutput("radar"))
)
server <- function(input, output, session){

  data <- data.frame(
    brands = c('github','gitlab','tfs','GitKraken','Git'),
    value = c(12,45,23,50,32),
    symbol = c("image://https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg",NA,NA,NA,NA))

  output$radar <- renderEcharts4r({
    data %>%
      e_charts(brands) %>%
      e_radar(value,max = 60)
  })
}
shinyApp(ui, server)

[helgasoft]

@jgraille, it looks like you are out of luck on this issue, for now. Echarts radar.name has no backgroundColor and the formatter is for strings only. You could make a plea for an enhancement on their board like this one...

[jgraille]

Hello @helgasoft ,

That was one bad approach. I tried to use the radar.axisLabel with the property rich but it is not working. :(

Here are some tries:

library(shiny)
library(echarts4r)

ui <- fluidPage(
  echarts4rOutput("radar"),
  echarts4rOutput("radar1"),
  echarts4rOutput("radar2")
)
server <- function(input, output, session){

  data <- data.frame(
    brands = c('github','gitlab','tfs','GitKraken','Git'),
    value = c(12,45,23,50,32),
    symbol = c("image://https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg",
               NA,NA,NA,NA))

  output$radar <- renderEcharts4r({
    data %>%
      e_charts(brands) %>%
      e_radar(value,max = 60) %>%
      e_radar_opts(axisLabel=list(rich=list(
        label=list(formatter='{OneLabel|github}',
        rich=list(OneLabel=list(backgroundColor='#00538B')))
                                           )
                                 )
                   )
  })
  output$radar1 <- renderEcharts4r({
    data %>%
      e_charts(brands) %>%
      e_radar(value,max = 60, axisLabel=list(
        rich=list(
          label=list(
            formatter="{OneLabel|github}",
            rich=list(OneLabel=list(backgroundColor='#00538B'))
            )
          )
        )
      )
  })
  output$radar2 <- renderEcharts4r({
    data %>%
      e_charts(brands) %>%
      e_radar(value,max = 60) %>%
      e_labels(list(formatter='{OneLabel|github}',
                    rich=list(OneLabel=list(backgroundColor='#00538B')
                              )
                    )
                )
  })
}
shinyApp(ui, server)

I don't know if the pb comes from my syntax or from the main library.

[helgasoft]

@jgraille, Echarts API is very confusing about the rich scope. For instance, it is defined under textStyle, but not under name - probably a mistake. So I incorrectly dismissed the formatter. Took a lot of wrangling, but finally got some redemption code. Hope it helps.

  library(echarts4r)
  data <- data.frame(
    brands = c('yelp','cloud','twitter_2','glass','mouse'),
    values = c(12,45,23,50,32)
  )
  # build a list for rich formatting
  rifo <- lapply(data$brands, function(x) { 
    list(height = 30, 
         backgroundColor=list(image=paste0('http://simpleicon.com/wp-content/uploads/',x,'-64x64.png')))
  }) 
  names(rifo) <- data$brands
  data %>%
    e_charts(brands) %>%
    e_radar(values, max=60, legend=FALSE) %>%
    e_radar_opts(         
      name = list(formatter = htmlwidgets::JS("
        function(value){ return '{' + value + '| }'; } "),
        rich = rifo)
    )

[jgraille]

Hi @helgasoft , The result is pretty good. It is helpful indeed. Thanks! 👍

[jgraille]

Solved.

[benubah]

@helgasoft Please any idea how a picture can be added to the e_title of the chart?

Some tries:

library(echarts4r)
data <- data.frame(
  brands = c('yelp','cloud','twitter_2','glass','mouse'),
  values = c(12,45,23,50,32)
)
# build a list for rich formatting
rifo <- lapply(data$brands, function(x) { 
  list(height = 30, 
       backgroundColor=list(image=paste0('http://simpleicon.com/wp-content/uploads/',x,'-64x64.png')))
}) 
names(rifo) <- data$brands

logo = list(height = 30, backgroundColor = list(image = "http://simpleicon.com/wp-content/uploads/mouse-64x64.png"))

data %>%
  e_charts(brands) %>%
  e_radar(values, max=60, legend=FALSE) %>%
  e_radar_opts(         
    name = list(formatter = htmlwidgets::JS("
        function(value){ return '{' + value + '| }'; } "),
                rich = rifo)) %>%
  e_title(text = "", textStyle = list(fontStyle = "italic",
  rich = list(label = list(formatter = htmlwidgets::JS("
       function(value){ return '{' + value + '| }'; } "), rich = logo))))

Thanks for any ideas...

[benubah]

Solved!

logo = list( 
  logo1 = list(height=25, backgroundColor=list(
    image='http://simpleicon.com/wp-content/uploads/mouse-64x64.png'))
)

data %>%
  e_charts(brands) %>%
  e_radar(values, max=60, legend=FALSE) %>%
  e_toolbox_feature("saveAsImage") |>
  e_radar_opts(         
    name = list(formatter = htmlwidgets::JS("
        function(value){ return '{' + value + '| }'; } "),
               rich = rifo)) %>%
  e_title(text='{logo1| } This and that', textStyle = list(fontStyle = "normal",
  rich = logo))