CODEWITHSUNDEEP
jqueryjqplot
centralscru
centralscru

Reputation: 6690

jqPlot pie chart - how can I capture a click on a legend item?

Here's the story so far.

  1. I've made the pie chart slices clickable so users can click to go to a different page listing the items relevant to that slice.

  2. For very small slices it's hard for the user to click them. I would therefore like to have the same functionality for the legend next to the pie chart - click a legend item, go to a URL.

  3. There doesn't seem to be any way to hook into a click on the legend. I'm looking for something like jqplotLegendClick. I can use an HTML A element as the legend text, which would be an acceptable solution, BUT when I click it nothing happens!

Any idea how to handle this? I would have thought it's quite a common scenario.

Here's a minimal jsfiddle showing the solution suggested below not working, in case anyone spots an issue. http://jsfiddle.net/Ep4sP/ Here's the js part.

$(function ()
{

    var data = [['2012-09-13', 1], ['2012-10-22', 2], ['2012-01-12', 3]];

    $.jqplot('ChartDIV', [data],
    {
        seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer
        },
        legend: { show: true }
    });

    $('.jqplot-table-legend-label').each(function(){
        $(this).click(function(){
            alert('you have clicked on the serie : ' + $(this).html());
        });
    });

});

Upvotes: 3

Views: 5461

Answers (1)

sdespont
sdespont

Reputation: 14025

You could add the following code AFTER the chart init: http://jsfiddle.net/WdLnm/272/

$('.jqplot-table-legend-label').each(function(){
    $(this).click(function(){
        alert('you have clicked on the serie : ' + $(this).html());
    });
});

Note that on recent versions the class name is .jqplot-table-legend (tested with 1.0.8)

Upvotes: 2

Related Questions