How to display tooltips on jqplot pie chart

Question

I have a jqplot pie chart with a legend and I would like to get the legend text to appear as a tooltip when the mouse hovers on the pies. I'm not sure how to do that. Does anyone have any experience doing similar?

example code:

$(document).ready(function(){
  var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],['Out of home', 16],['Commuting', 7], ['Orientation', 9]];
  var plot1 = jQuery.jqplot ('chart1', [data],
    {
      seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
          showDataLabels: true
        }
      },
      legend: { show:true, location: 'e' }
    }
  );
});

Answer 1

I'm using the latest version of jqPlot and got the tooltips to work by just using the following inside "seriesDefaults" section:

highlighter: {
  show: true,
  formatString:'%s', 
  tooltipLocation:'sw', 
  useAxesFormatters:false
}

The important part is "useAxesFormatters: false" since there are no axes in a pie chart. Feel free to change the "formatString" to whatever it is you want to, but for me, just "%s" shows the exact same string which shows up in the legends.

Answer 2

I do not believe there is a built in for this. You'll need to bind handlers to the 'jqplotDataHighlight' and 'jqplotDataUnhighlight' events. See the example on the bottom of this page. This is doing it with bubble plots, but it should translate to pie plots as well.

Answer 3

I am using the version of the highlighter plugin on the following link:

https://github.com/tryolabs/jqplot-highlighter

The parameters I am using:

highlighter: {
    show:true,
    tooltipLocation: 'n',
    tooltipAxes: 'pieref', // exclusive to this version
    tooltipAxisX: 20, // exclusive to this version
    tooltipAxisY: 20, // exclusive to this version
    useAxesFormatters: false,
    formatString:'%s, %P',
}

The new parameters ensure a fixed location where the tooltip will appear. I prefer to place it on the upper left corner to avoid problems with resizing the container div.

Answer 4

As I couldn't get the Highlighter to work - it did not display anything for me on the pie chart - I ended up with the solution to display a browser tooltip based on the highligter event.

var plot1 = jQuery.jqplot ('chart1', [data], {
seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer
    }
}
);

$('#chart1').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { 
    document.getElementById('chart1').title = data;
    //alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
    }); 

Answer 5

You need to bind the jqplot data highligh and unhighligh events, grab the data you want to show and set the chart containing div's title attribute.

The following code shows the title in the format of "x: y", where x is the legend label and y is the value:

 var plot = $.jqplot('plotDivId',...);

 $("#plotDivId").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                

            $this.attr('title', data[0] + ": " + data[1]);                               
        }); 

 $("#plotDivId").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
            var $this = $(this);                

            $this.attr('title',""); 
 });

This piece of code is being used in my system which works with no problem.