All examples By author By category About

timelyportfolio

rCharts Hijacks Dimple's Tooltip

In an email conversation, someone asked:

How might I delete some lines in the default dimplejs tooltip?

This question comes up because the user felt like the dimplejs tooltip duplicated info that already appeared in the legend. This hack will require install_github("timelyportfolio/rCharts@dimple_v2.0.0") [2014-07-02] until the newest dimple version and functionality gets pulled into the primary rCharts repo.

The code below will hijack dimplejs getTooltipText with rCharts and allow us to change what text we see. If you look closely at the result, you should notice that even though we specify a z it does not appear and for effect we added a worthless custom line. This all shows up here.

require(rCharts)

d1 <- dPlot(
  x= "x",
  y = "y",
  groups = "grp",
  data = data.frame(
    x = LETTERS[1:4],
    y = runif(4,1,100),
    grp = rep(1:2,2)
  ),
  z = "y",  #throw this in as another test
  type = "bubble",
  xAxis = list(orderRule = "x"),
  zAxis = list(type = "addMeasureAxis"),
  #colorAxis = list(type="addColorAxis",colorSeries="grp"),
  legend = list(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

d1$chart("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');

            // Get distinct text rows to deal with cases where 2 axes have the same dimensionality
            return rows; //rows.filter(function (elem, pos) { return rows.indexOf(elem) === pos; });
        }          
!#")

d1