rCharts tooltip content for multiplie lines

Question

I am a simple R coder with almost no experience coding in HTML of javascript, so I'm having a hard time understanding the wrappers for the tool tip customization code.

I have 2 time series that I've plotted with rCharts lineWithFocusChart, now I want to customize the tooltip to look like this: http://shiny.rstudio.com/gallery/nvd3-line-chart-output.html

Here is my code so far:

shinyServer(function(input, output) {

  output$myChart <- renderChart({
    select<-as.numeric(input$radioTS)

    out <- data.frame(Actuals[,select], Fits[,select], mmmyyyy)
    colnames(out) <- c("Actuals","Fits","Date")
    data<-melt(out,id.vars = 'Date')
    data$Date <- as.numeric(as.POSIXct(data$Date)) * 1000

    p1 <- nPlot(
      value ~ Date,
      group = 'variable',
      data = data,
      type = 'lineWithFocusChart',
      width = 650,
      height = 500
    )

    p1$addParams(dom = 'myChart')
    p1$xAxis(tickFormat = "#!function(d) {return d3.time.format('%b %Y')(new Date(d))}!#")
    p1$x2Axis(tickFormat = "#!function(d) {return d3.time.format('%Y')(new Date(d))}!#")
    p1$yAxis(tickFormat = "#!function(d) {return d3.format('0,.0')(d)}!#")

    return(p1) 
  })
})

Please provide a minimal reproducible example. – jdharrison Jun 30 '14 at 06:45 — jdharrison, Jun 30 '14 at 06:45

timelyportfolio · Accepted Answer · 2014-06-30T14:14:41.160

The shiny example referenced uses nvd3 interactiveGuideline feature. To employ this in rCharts, you can p1$chart(useInteractiveGuideline=TRUE), but due to this nvd3 issue the lineWithFocusChart does not yet offer this functionality, so for now we will be limited to lineChart.

Unfortunately, nvd3 currently does not support customization of the interactiveGuideline, since this pull request has not yet been accepted. However, you can get a pretty decent looking tooltip by proper naming as shown in this example.

shinyServer(function(input, output) {

      output$myChart <- renderChart({
        select<-as.numeric(input$radioTS)

        out <- data.frame(Actuals[,select], Fits[,select], mmmyyyy)
        colnames(out) <- c("Actuals","Fits","Date")
        data<-melt(out,id.vars = 'Date')
        data$Date <- as.numeric(as.POSIXct(data$Date)) * 1000

        p1 <- nPlot(
          value ~ Date,
          group = 'variable',
          data = data,
          type = 'lineChart',  # see explanation for why not lineWithFocusChart
          width = 650,
          height = 500
        )

        p1$addParams(dom = 'myChart')
        p1$xAxis(tickFormat = "#!function(d) {return d3.time.format('%b %Y')(new Date(d))}!#")
        #commented x2Axis out since only lineChart
        #p1$x2Axis(tickFormat = "#!function(d) {return d3.time.format('%Y')(new Date(d))}!#")
        p1$yAxis(tickFormat = "#!function(d) {return d3.format('0,.0')(d)}!#")
        p1$chart(useInteractiveGuideline = TRUE)

        return(p1) 
      })
    })

Thank you so much! I've seen this before: `p1$chart(useInteractiveGuideline = TRUE)` but I didn't realize it wasn't available specifically for lineWithFocusChart. Follow up question: do you know how to add in the vertical line as well? — mk0108, Jun 30 '14 at 16:57

rCharts tooltip content for multiplie lines

1 Answers1