tooltip format in Shiny

[sanchez5674]

Hi,

I'm able to change the tooltip format like this:

sparkline(values = 1:3, width = 150, height = 60, type = "bar", tooltipFormat =  '${{value}}')

However, that does not seem to work within Shiny. Only the $ is printed on the tooltip. How is the data accessed?

Also, do you have an example with tooltipValueLookups implemented? How do you pass the JS code?

Thanks.

Carlos

[ramnathv]

I am not able to reproduce the problem you have indicated. Here is my code

library(sparkline)
x = sparkline(values = 1:3, type = "bar", tooltipFormat =  '${{value}}',
  width = 200, height = 30
)
mystyle = "
.jqstooltip {
  -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}"

library(shiny)
ui = bootstrapPage(
  tags$style(mystyle),
  sparkline:::sparklineOutput('mysparkline', 200, 30)
)

server = function(input, output){
  output$mysparkline = sparkline:::renderSparkline(
   x
  )
}

shinyApp(ui = ui, server = server)

Note that we need the extra css when working with bootstrap to prevent the tooltips from getting cut off. I will be adding it to the sparkline css directly in the future.

[sanchez5674]

Thanks!

But, how can I call sparkline from the server? For instance, let's say I want to return it to a uiOutput object along with some other HTML code.

Carlos

[ramnathv]

In the example above, I am calling sparkline from the server. You can use sparklineOutput to place your sparkline at the appropriate location in your UI.

[sanchez5674]

Hi,

Thanks for your help. I managed to make it work but I get the feeling is not the right way. In order to change the format I had to change {{value}} by {{y}}. Anyway, this is a simplified version of my code where I've replaced the icon in a valueBox by a sparkline plot.

library(shiny)
library(sparkline)
library(shinydashboard)

mystyle = "
.jqstooltip {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.spark {
  position: absolute;
  bottom: 5px;
  right: 5px;
  margin-bottom: 5px;
}
"

ui = dashboardPage(
  dashboardHeader(disable = TRUE),
  dashboardSidebar(disable = TRUE),
  dashboardBody(
    tags$style(mystyle),
    valueBoxOutput("sparkBox")
  )
)

server = function(input, output){

  data <- ceiling(runif(12, 500, 1000))

  output$sparkBox <- renderValueBox({
    tags$div(class = "col-sm-4",
             tags$div(class = "small-box bg-aqua",
                      tags$div(class = "inner",
                               h3(data[3]),
                               p("Best Price")),
                      tags$div(class = "spark",
                               sparkline:::sparklineOutput("sprk", 150, 80),
                               sparkline:::sparkline(outputid = "sprk", 
                                                     values = data,
                                                     tooltipFormat =  '${{y}}',
                                                     width = 150, height = 80)
                      )))
  })

}

shinyApp(ui = ui, server = server)

How would one implement tooltipValueLookups to map 0 to January, 1 to February ...? Is this possible?

Thank you very much.

[sanchez5674]

Hi,

I was able to do what I wanted by using shinyjs along with sparkline. This is a simple example with the tooltip formatted:

ui.R

library(shiny)
library(shinyjs)
library(sparkline)

jsSprk <- "shinyjs.sprk = function() {

           var myvalues = [10,8,5,7,4,4,1];

           $('#sprkMe').sparkline(myvalues, {
             type: 'pie',
             width: '200px',
             height: '200px',
             sliceColors: ['#5d3092', '#4dc9ec', '#9de49d', '#9074b1', '#66aa00', '#dd4477', '#0099c6', '#990099'],
             borderWidth: 7,
             borderColor: '#f5f5f5',
             tooltipFormat: '<span style=\"color: {{color}}\">&#9679;</span> {{offset:names}} ({{percent.1}}%)',
             tooltipValueLookups: {
              names: {
                0: 'Automotive',
                1: 'Locomotive',
                2: 'Unmotivated',
                3: 'Three',
                4: 'Four',
                5: 'Five'
              }
            }
         });
       }"

mystyle = "#sprkMe {
            visibility: inherit !important;
          }

          .jqstooltip {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
          }"

  fluidPage(
    tags$style(mystyle),
    useShinyjs(),
    extendShinyjs(text = jsSprk),
    h1("JS"),
    sparkline:::sparklineOutput(outputId = "sprkMe", 200, 200)
  )

server.R

server = function(input, output) {

  output$sprkMe <- sparkline:::renderSparkline({

    js$sprk()

  })
}

Carlos