Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display tooltips on jqplot pie chart

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' }
    }
  );
});
like image 904
emt14 Avatar asked Nov 21 '11 09:11

emt14


3 Answers

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.

like image 122
Srinidhi Avatar answered Nov 19 '22 03:11

Srinidhi


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.

like image 44
Wagner Dias Avatar answered Nov 19 '22 04:11

Wagner Dias


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.

like image 26
Koby Mizrahy Avatar answered Nov 19 '22 02:11

Koby Mizrahy