3

I have an R shiny app containing a few Highcharts plots that were created with rCharts package. I would like to include a background image (sourced locally from my hard drive) in one of the plots.

I found an example on Highcharts website using plotBackgroundImage option, see jsfiddle example.

I adapted it to rCharts, which works great. I was able to source the image via url or locally:

require(rCharts)    

# img_src <- '<path-to-the-folder>/skies.jpg' this works also
img_src <- 'https://www.highcharts.com/samples/graphics/skies.jpg'

p <- Highcharts$new()
p$chart(type='line', plotBackgroundImage=img_src)
p$xAxis(categories=LETTERS[1:10])
p$series(data=sample(10,10), color='#303030')
p

However, in the shiny app, the image only comes up when sourced from url. I cannot get it to work when sourced locally:

require(shiny)
require(rCharts)

ui <- fluidPage(
    mainPanel(showOutput("chart", "HighCharts"))
)

server <- function(input, output) {
  output$chart <- renderChart({

    # img_src <- '<path-to-the-folder>/skies.jpg' # this doesn't work
    img_src <- 'https://www.highcharts.com/samples/graphics/skies.jpg'

    p <- Highcharts$new()
    p$chart(type='line', plotBackgroundImage=img_src)
    p$xAxis(categories=LETTERS[1:10])
    p$series(data=sample(10,10), color='#303030')
    p$addParams(dom='chart')
    p
  })
}

shinyApp(ui = ui, server = server)

Is there a way to locally source the background image in this case? Any suggestions would be much appreciated!


UPDATE:

I found that it works when the image is included in the www folder as suggested in this post. However, my image (heatmap) is changing based on the reactive input. It is more practical to render a temporary png file in tempdir and source it from there. Is there a way to source the image straight from the temporary directory?

Community
  • 1
  • 1
Mark
  • 45
  • 5

0 Answers0