Question

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.

Answer 1

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!