CODEWITHSUNDEEP
jqueryflotpie-chart
Ed Sinek
Ed Sinek

Reputation: 4977

jQuery Flot Pie Chart - callouts for labels?

I've been using flot for my jquery charting needs. Now, I need to add a pie chart (which I know flot does pretty well). For the pie chart, one thing that we need that I didn't see that flot had was callouts to the values on each pie piece (callouts being the label with a line connecting the label to the pie piece). Does anyone know how to get callouts to work on the pie piece in flot?

The main reason we need callouts is because we need to have the label for each pie piece regardless of its size. Callouts would allow us to have smaller pie pieces and reduce the potential for text overlaps with the labels.

I've proposed the use of a legend, but that is not acceptable to the business. I do know that other charting solutions allow label callouts, but would like to continue to use flot if possible.

Thanks in advance.

Upvotes: 1

Views: 4536

Answers (2)

hayesgm
hayesgm

Reputation: 9096

I added something similar to test for a plothover. You'll need to adapt the solution to your particular scenario, but this should be a big help.

 function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body");//.fadeIn(200);
 }

 var previousPoint = null;

 $('#placeholder').bind('mouseout', function() {
    plot.unhighlight();
    $("#tooltip").remove();
    $(this).data('previous-post', -1);
 });

 $('#placeholder').bind('plothover', function(event, pos, item) {
    if (item) {
        if ($(this).data('previous-post') != item.seriesIndex) {
            plot.unhighlight();
            plot.highlight(item.series, item.datapoint);
            $(this).data('previous-post', item.seriesIndex);
        }
        $("#tooltip").remove();
        y = 'on ' + (new Date(item.datapoint[0])).toDateString() + ': ' + item.datapoint[1];
        showTooltip(pos.pageX, pos.pageY, item.series.label + " " + y);
    } else {
        plot.unhighlight();
        $("#tooltip").remove();
        previousPost = $(this).data('previous-post', -1);
    }
 });

Let me know if this helps!

Upvotes: 4

Ben Ripley
Ben Ripley

Reputation: 2145

You could use a plothover event to show the callout. The label for the callout could be wherever you like. This is shown in the last example at the Flot Page. Google Spreadsheets uses a solution similar to the one linked and it works very well.

Upvotes: 1

Related Questions