Render datatable with sparklines in Shiny

Question

I want to include sparklines in a shiny DT. It works fine in the RStudio viewer but in Shiny the sparklines are not rendered. Here is a minimal example.

# dependencies
  require(sparkline)
  require(DT)
  require(shiny)

# create data with sparklines
  spark_data <- data.frame(
    id = c('spark1', 'spark2'),
    spark = c(
      spk_chr(values = 1:3, elementId = 'spark1'),
      spk_chr(values = 3:1, elementId = 'spark2')
    )
  )

# render in RStudio viewer (this works)
  tbl <- datatable(spark_data, escape = FALSE)
  spk_add_deps(tbl)

# render in Shiny (no sparklines rendered in DT)
  ui <- fluidPage(
      sparklineOutput("test_spark"),
      dataTableOutput("tbl")
  )

  server <- function(input, output) {
    # sparkline outside DT (works fine) - also ensures sparkline dependencies are attached
      output$test_spark <- renderSparkline(sparkline(1:3))

    # sparkline inside DT (does not render)
      output$tbl <- renderDataTable(
        expr = spark_data,
        escape = FALSE
      )
  }

  shinyApp(ui = ui, server = server)

Refer to this [link](https://leonawicz.github.io/HtmlWidgetExamples/ex_dt_sparkline.html) for getting sparklines in shiny datatable. — SBista, Jan 05 '17 at 06:46
Thanks, yes I did spend some time on that page. It covers my 1st case (i.e. render in RStudio Viewer) which I have no problem with. The link does not cover the second case though (why it fails to render in Shiny). I suspect the problem may be with the dependencies. It's not clear to me how to use 'spk_add_deps' in a shiny app, hence my hack of rendering a dummy sparkline outside of the DT to get the dependencies attached. — Grant, Jan 05 '17 at 07:23
I'm reposting a version of this question here https://stackoverflow.com/questions/47041415/include-sparkline-htmlwidget-in-datatable-cells-in-a-shiny-app-without-resortin because it seems the solution shouldn't require manually entering the JavaScript. If it works in the viewer, why not in Shiny? — Brian Stamper, Oct 31 '17 at 18:31

SBista · Accepted Answer · 2017-01-05T09:34:33.627

I have modified your code to generate sparklines. I refered to this link to generate the sparklines.

require(sparkline)
require(DT)
require(shiny)

# create data
spark_data1<- data.frame(id = c('spark1', 'spark2'),
                          spark = c("1,2,3", "3,2,1"))



ui <- fluidPage(
  sparklineOutput("test_spark"),
  DT::dataTableOutput("tbl")
)

server <- function(input, output) {

  line_string <- "type: 'line', lineColor: 'black', fillColor: '#ccc', highlightLineColor: 'orange', highlightSpotColor: 'orange'"

  cd <- list(list(targets = 1, render = JS("function(data, type, full){ return '<span class=sparkSamples>' + data + '</span>' }")))

  cb = JS(paste0("function (oSettings, json) {\n  $('.sparkSamples:not(:has(canvas))').sparkline('html', { ", 
                 line_string, " });\n}"), collapse = "")

  output$tbl <- DT::renderDataTable({
    dt <-  DT::datatable(as.data.frame(spark_data1),  rownames = FALSE, options = list(columnDefs = cd,fnDrawCallback = cb))
  })
}

shinyApp(ui = ui, server = server)

Hope it helps!

This is a very useful example and it still works 5 years later! I wonder if it may be possible to share an example of how to display boxplots. Thanks — Angelo, May 03 '22 at 13:43

score 3 · Answer 2 · answered Oct 31 '17 at 19:13

Old-ish question, I know, but based on info in the question Add label to sparkline plot in datatable I think the solution is what you tried originally plus just a few lines. Here I trimmed out the parts demo-ing it works in the viewer and added just what is needed to make the sparklines work.

# dependencies
require(sparkline)
require(DT)
require(shiny)

# create data with sparklines
spark_data <- data.frame(
  id = c('spark1', 'spark2'),
  spark = c(
    spk_chr(values = 1:3, elementId = 'spark1'),
    spk_chr(values = 3:1, elementId = 'spark2')
  )
)

###  adding this <------------
cb <- htmlwidgets::JS('function(){debugger;HTMLWidgets.staticRender();}')

ui <- fluidPage(
  ###  and this <------------
  htmlwidgets::getDependency('sparkline'),
  dataTableOutput("tbl")
)

server <- function(input, output) {

  output$tbl <- renderDataTable(
    expr = spark_data,
    escape = FALSE,
    ###  and this <------------
    options = list(
      drawCallback =  cb
    )
  )
}

shinyApp(ui = ui, server = server)

Also answered my own question on this here https://stackoverflow.com/questions/47041415/include-sparkline-htmlwidget-in-datatable-cells-in-a-shiny-app-without-resortin — Brian Stamper, Apr 17 '18 at 14:41

Render datatable with sparklines in Shiny

2 Answers2

Linked