CODEWITHSUNDEEP
d3.jsnvd3.js
Dave Driesmans
Dave Driesmans

Reputation: 819

How to create a tooltip with custom value

i use NVD3 for a scatter chart but when hovering for the tooltip i want the label instead of the key.

this is my json:

long_data = [ 
  {
    key: 'PC1',
    color: '#00cc00',
    values: [
      { 
        "label" : "Lichtpuntje" ,
        "x" : 11.16,
        "y" : -0.99,
        "size":1000,
        "color": '#FFCCOO'
      } , 
      { ....

this is the js

nv.addGraph(function() {

chart = nv.models.scatterChart()
            .showDistX(true)
            .showDistY(true)
            .useVoronoi(true)
            .color(d3.scale.category10().range())
            .transitionDuration(300)
       ...
      chart.xAxis.tickFormat(d3.format('.02f'));
      chart.yAxis.tickFormat(d3.format('.02f'));
      chart.tooltipContent(function(i) { return labelArray[i];  });

      d3.select('#test1 svg')
          .datum(long_data)
          .call(chart);
      ...

how i can i get the tooltip to have the label value? or how can i have i as index parameter?

Upvotes: 1

Views: 4373

Answers (5)

Owen Far
Owen Far

Reputation: 191

For anyone here having issues trying to show a custom tooltip with InteractiveGuideline enabled, you must use the following:

chart.interactiveLayer.tooltip.contentGenerator(function (obj) { ... });

As a bonus, here's the code for the default table layout with an added custom value 'z':

chart.interactiveLayer.tooltip.contentGenerator(function (obj) {

    var date = obj.value; // Convert timestamp to String
    var thead = '<thead><tr><td colspan="4"><strong class="x-value">'+ date +'</strong></td></tr></thead>';

    var table = '<table>' + thead + '<tbody>';

    // Iterate through all chart series data points
    obj.series.forEach(dataPoint => {

        // Get all relevant data
        var color = dataPoint.color;
        var key = dataPoint.key;
        var value = dataPoint.value;
        var string = dataPoint.data.z; // Custom value in data

        var row = '<tr><td class="legend-color-guide"><div style="background-color: '+ color +';"></div></td><td class="key">'+ key +'</td><td class="string">'+ string +'</td><td class="value">'+ value +'</td></tr>';

        table += row;
    });

    // Close table & body elements
    table += '</tbody></table>';

    return table;
});

Upvotes: 1

shelbypereira
shelbypereira

Reputation: 2245

I found the answer from davedriesmans quite useful, however note that in the code chart.tooltipContent(function(key, y, e, graph)) is not for a scatterPlot.

This looks like the function for a pie chart. In that case you can use the e.pointIndex directly to allow you to index into the series by graph.series.values[e.pointIndex].

However, I built on the function davedriesmans suggested for a scatterplot as follows.

function getGraphtPt(graph, x1, y1) {
    var a = graph.series.values;
    var i = a.length;       
    while (i--) {
     if (a[i].x==x1 & a[i].y==y1) {
       return a[i];
     }
    }
   return null;
}

the main chart call to insert the tooltip is just

  chart.tooltipContent(function (key, x, y, graph) {
        s = "unknown";
        pt = getGraphtPt(graph, x, y);
        if (pt != null) {
 //below key1 is a custom string I added to each point, this could be 'x='+pt.x, or any custom string
// I found adding a custom string field to each pt to be quite handy for tooltips
            s = pt.key1; 
        }
        return '<h3>' + key + s + '</h3>';
    });

Upvotes: 0

Max
Max

Reputation: 1173

Newer NVD3 versions use tooltipGenerator. Also I don't understand why shev72 is iterator over the whole series, we're getting the index in the series by NVD3 directly, e.g. if our data looks like this:

data = [{"key": "Group 0", "values": [{"y": 1.65166973680992, "x": 0.693722035658137, "z": "SRR1974855"}, {"y": 1.39376073765462, "x": -0.54475764264808, "z": "SRR1974854"}]

then you can get your z values like this:

chart.tooltip.contentGenerator(function (d) {
      var ptIdx = d.pointIndex;
      var serIdx = d.seriesIndex;
      z = d.series[serIdx].values[ptIdx].z
      return z;
    });

Upvotes: 1

Max Doubt
Max Doubt

Reputation: 11

You can access your label variable like this:

chart.tooltipContent(function(graph) {
  console.log(graph); //examine the graph object in the console for more info
  return graph.point.label;
});

Upvotes: 1

Dave Driesmans
Dave Driesmans

Reputation: 819

ok, not a clean solution, but works:

chart.tooltipContent(function(key, y, e, graph) { 
      labelIndex=arrayContains(resultYVal, e);
      return resultLabel[labelIndex];
});

function arrayContains(a, obj) {
   var i = a.length;
   while (i--) {
      if (a[i] == obj) {
          return i;
      }
   }
   return false;
}

Upvotes: 1

Related Questions