Is it possible to add more details on tooltips?

[happyshows]

My understanding is: if it's not x,y,z or group, then it won't be included when hover over. Is it possible to put additional column/dimension so that it will show on tooltip?

[timelyportfolio]

Yes there is a fairly easy way. I will try to demo tonight.

[timelyportfolio]

This is unacceptably ugly, but it does work borrowing from an old rCharts example. It does illustrate though that this is sort of infinitely customizable -- see dimple example and using d3-tip. It might be easier if you have a reproducible example that I could use.

library(rcdimple)
library(magrittr)

dimple(
  x= "x",
  y = "y",
  groups = "grp",
  data = data.frame(
    x = LETTERS[1:4],
    y = runif(4,1,100),
    addlfield = c("hi","extra","info","here"),
    grp = rep(1:2,2)
  ),
  z = "y",  #throw this in as another test
  type = "bubble"
) %>%
  xAxis(orderRule = "x") %>%
  zAxis(type = "addMeasureAxis") %>%
  #colorAxis = list(type="addColorAxis",colorSeries="grp") %>%
  add_legend(x = 60, y = 10, width = 700, height = 20) %>%
  #hijack dimple's tooltip function
  #so we can still inherit dimple's tooltip functionality
  #and not have to completely rebuild a tooltip
  #so copy dimple getTooltipText code and then comment out 
  #what we do not want
  tack(
    options = list(
      chart = htmlwidgets::JS("
        function(){
          this.series[0].getTooltipText = function(e){
           var rows = [];
           // Add the series categories
           if (
                this.categoryFields !== null &&
                this.categoryFields !== undefined &&
                this.categoryFields.length !== 0
            ) {
             this.categoryFields.forEach(function (c, i) {
              if (c !== null && c !== undefined && e.aggField[i] !== null && e.aggField[i] !== undefined) {
                 // If the category name and value match don't display the category name
                  rows.push(c + (e.aggField[i] !== c ? ': ' + e.aggField[i] : ''));
                }
              }, this);
            }

            if (this.x) {
              this.x._getTooltipText(rows, e);
            }
            if (this.y) {
              this.y._getTooltipText(rows, e);
            }
            if (this.z) {
            //  this.z._getTooltipText(rows, e);
            }
            if (this.c) {
            //  this.c._getTooltipText(rows, e);
            }

            debugger;
            //as an example of something custom
            rows.push('something custom here');

            //as another example get addl data assuming x is unique
            //   and no aggregation
            rows.push(
              [
                'more info: ',
                this.data.filter(function(xd){
                  return xd.x == e.x
                })[0].addlfield
              ].join('')
            )

            return rows;
          }

          return this
        }
      ")
    )
  )

[happyshows]

Let's try this, say I want f to be shown on tooltip: dimple( x= "mpg", y = "cyl", f = "hp", groups = "gear", data = mtcars, type = "bubble" )

[timelyportfolio]

Ok, this will be a good illustration, and in this case, there is a much easier solution. x, y, and groups can be a vector for multivariate situations. Note: the last member of the group vector determines color. The only side effect of using multiple groups will be if you are trying to use dimple's aggregation.

library(rcdimple)

dimple(
    x= "mpg",
    y = "cyl",
    groups = c("hp","gear"),
    data = mtcars,
    type = "bubble"
)

[timelyportfolio]

@happyshows, can we close this?

[happyshows]

yes, it works.