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' }
    }
  );
});

score 16 · Answer 1 · edited Aug 03 '12 at 15:19

16

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.

edited Aug 03 '12 at 15:19

Mayowa

196
1
5

answered Jan 04 '12 at 21:24

Srinidhi

290
2
8

4

upvoted your post. your solution works, but it was missing the 'show parameter', you might also need to point out that, the highlighter plugin needs to be loaded/included – Mayowa Aug 03 '12 at 15:10

score 12 · Accepted Answer · answered May 02 '12 at 13:58

12

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.

answered May 02 '12 at 13:58

Koby Mizrahy

1,361
2
12
23

1

Dosn't work when passing with the mouse from a section of the pie to another withou getting out – coorasse Feb 21 '13 at 14:27
@coorasse Perhaps your issue is related to your browser, as mine appears Firefox specific. See my question at http://stackoverflow.com/q/21918656/449347 – k1eran Feb 20 '14 at 22:53
is it possible to use the same for a stacked bar chart? – usr30911 Feb 09 '15 at 15:16
@Koby Mizrahy How to display the tooltips or labels always in the pie charts in jqplot? Any idea on this? – Mihir Aug 12 '15 at 14:23

score 7 · Answer 3 · answered Oct 05 '12 at 14:14

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.

score 0 · Answer 4 · answered Nov 07 '14 at 12:25

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);
    });

score 0 · Answer 5 · answered Nov 21 '11 at 20:11

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.

How to display tooltips on jqplot pie chart

5 Answers5

Linked