Flot donut chart- format individual pie slices

Question

I have a pretty basic donut chart using flot.js.

var options = {
          series: {
            pie: {
                innerRadius: 0.85,
                show: true
              }
            },
            grid: {
              hoverable: true
            },
            colors: ["#83a243", "#0d596d"]
            };
$.plot($("#donut-div"), [4, 6], options);

Is it possible to format individual slices? I want to set the innerRadius of one slice to be wider than another. My goal is to have a graph with two data points and to make one of the slices wider to emphasize that information.

Answer 1

Sadly there is no individual inner radius option, and I didnt see it being talked about on the forum. Though I might have misunderstood what you want: the innerRadius is the radius of the hole of the donut, not the radius of the slices. With individual innerRadius, you would end with that:

http://img11.hostingpics.net/pics/420457test.png

That doesn't make the slices wider, but separate them.

If you want to try that, you would have to edit the pie plugin, the real difficulty is not the individual radius but the shadow (there is a shadow if you tilt your pie) that is currently a whole dark circle which needs to be drawn with individual shadows instead, but you dont seem to use the shadow so you wont need it.

So, the pie plugin use a drawPie() method to draw the pie, method containing a drawSlice() method that draws the individual slice. What you need to do is tell drawSlice to translate the drawing according to your radius:

so where drawSlice is called, just replace the call with something like this:

drawSlice(slices[i].angle, slices[i].translateRadius, slices[i].color, true);

(I added the slices[i].translateRadius in the call)

and in the drawSlice method itself, after the fill option:

ctx.translate(
  translateRadius * Math.cos(currentAngle + angle / 2), 
  translateRadius * Math.sin(currentAngle + angle / 2)
)

Thats it, for the translating. You could use some security option( check if translateRadius is set, etc...), and you just have to add a translateRadius option in your indivual series like this:

var data = [ {translateRadius: 10, data: [66] } , {translateRadius: 10, data: [33] }