Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

custom a tooltipContent of tooltips with datum in discreteBarChart nvd3.js

How I can custom a tooltipContent of tooltips using data loaded into "datum" in discreteBarChart nvd3.js?, for example, with the following data Jason, I want to see data3, data4, Data5 in tooltips

JsonData = [ 
             {
               key: "Serie1",
               values: [
                         {'Data1':  1, 
                          'Data2':  2, 
                          'Data3':  3,
                          'Data4':  4,
                          'Data5':  5
                         }
                       ]
             }
           ];
like image 222
Fernando Montoya Avatar asked Mar 28 '14 12:03

Fernando Montoya


People also ask

How to change the default tooltip content?

Default Tooltip can be modified at dataSeries or dataPoint level. You can add content to be displayed in toolTip using toolTipContent. toolTipContent set at dataPoint will override toolTipContent set at dataSeries level. Default: auto set depending on chart type. toolTipContent can either be literal string or keywords.

What are external tooltips?

External (Custom) Tooltips. Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an oncanvas one. You can enable custom tooltips in the global or chart configuration like so:

How do I override the tooltip defaults for chart types?

The bubble, doughnut, pie, polar area, and scatter charts override the tooltip defaults. To change the overrides for those chart types, the options are defined in Chart.overrides [type].plugins.tooltip.

Does tooltipcontent apply to all datapoints in a dataseries?

toolTipContent mentioned at dataSeries applies to all dataPoints unless overwritten by toolTipContent at dataPoint level. While setting toolTipContent, user can use the property names as a keyword.


2 Answers

This is how to do it:

nv.addGraph(function() {  
   var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.Data1 })
      .y(function(d) { return d.Data2 })
      .tooltips(true)
      .tooltipContent(function(key, y, e, graph) {
       var data =graph.series.values[y-1];
       return  '<p> Text1: ' +  data.Data3 + '</p>'
             + '<p> Text2: ' +  data.Data4 + '</p>'
             + '<p> Text3: ' +  data.Data5 + '</p>'
       });

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

   nv.utils.windowResize(chart.update);

   return chart;
});
like image 172
Fernando Montoya Avatar answered Oct 20 '22 00:10

Fernando Montoya


I came up with something like this, since the graph object has a value attribute:

chart.tooltipContent(function (key, date, e, graph) {
     var value = graph.value;
     return  "<p><strong>" + date + "</strong><br>" + value + "</p>";
});

No need for accessing the series-array I guess.

like image 34
xJREB Avatar answered Oct 20 '22 00:10

xJREB