Flot pie charts - externally selecting slices

Question

I found this solution.

If type of chart is pie, how specify parameters (x,y) of highlight(x, y)?

Thanks

Sorry for my bad English.

Answer 1

We're maintaining selection state outside of the chart (as a backbone model). When a selection event (click) occurs, we set the selected slice in the model. When selection changes, we refresh the chart using a selection color for the pie slices that are selected.

var data = [];
var color = slice.index == selected ? '#FF0000' : '#0000FF';
data.push({label:slice.Label,data:slice.Value,color:color});

The snippet above uses blue for all non-selected slices, red for the selected slice. Your color logic will be more sophisticated.

NOTE: You can also use rgba CSS for the colors, which gives a really nice effect. For example:

var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)';

Answer 2

Unfortunately, flot doesn't expose the pie highlighting code to the user. So we are pretty much out of luck, but what may work for you is synthesizing a click event at the appropriate place on the page:

$("#highligher").click(function () {
    var e = jQuery.Event('click');
    e.pageX = 250; //add a made up x/y coordinate to the click event
    e.pageY = 250;
    $('#plot canvas:first').trigger(e); //trigger the click event on the canvas
});

Here it is in action: http://jsfiddle.net/ryleyb/mHJm5/

The problem is you have to know where the slice you want to highlight is already. This would be easy enough to set if the graph is static. If it's a dynamic graph, you'd have to dig into the source of the pie code to figure out how to calculate where the pie slice is. It might be easier in that case to just have a copy of all the pie functions and manually draw on the pie overlay.

Answer 3

Just got this working by altering a few things...

I changed highlight and unhighlight in jquery.flot.pie.js to pieHighlight and pieUnhighlight.

Then, after these two lines in jquery.flot.pie.js...

plot.hooks.processOptions.push(function(plot, options) {
            if (options.series.pie.show) {

I added...

                plot.highlight = pieHighlight;
                plot.unhighlight = pieUnhighlight;