Gradients on Flot

Question

How can I set gradient effects on pie charts?

[{
label: i, 
data: 1000,
color: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ]
},
//nextserie
]

doesn't work.

Also how can I set gradient effects as default colors for my charts? In the way you can index it by number like:

[{
label: i, 
data: 1000,
color: 1,
},
//nextserie
]

Answer 1

The library doesn't support that, currently. If you're comfortable merging patches, there was one submitted along with issue 355 (follow the link to the original Google Code issue to get the attachment) that adds gradients to pies. I haven't tried it myself yet, though.

Answer 2

I have now added support for rendering pie chart with gradients, either radial or linear. My commit is referenced in pull request #853.

An example "default" pie chart with a radial gradient:

$.plot($("#default_gradient"), data, {
    series: {
      pie: {
        show: true,
        gradient: {
          radial: true,
          colors: [
            {opacity: 0.5},
            {opacity: 1.0}
          ]
        }
      }
    }
});

An example donut chart with a radial gradient:

$.plot($("#donut_gradient"), data,
  {
    series: {
      pie: {
        innerRadius: 0.5,
        show: true,
        gradient: {
          radial: true,
          colors: [
            {opacity: 1.0},
            {opacity: 1.0},
            {opacity: 1.0},
            {opacity: 0.5},
            {opacity: 1.0}
          ]
        }
      }
    }
});

An example of a tilted pie chart with a radial gradient:

  $.plot($("#graph9_gradient"), data,
  {
    series: {
      pie: {
        show: true,
        radius: 1,
        tilt: 0.5,
        gradient: {
          radial: true,
          colors: [
            {opacity: 0.5},
            {opacity: 1.0}
          ]
        },
        label: {
          show: true,
          radius: 1,
          formatter: function(label, series){
            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
          },
          background: { opacity: 0.8 }
        },
        combine: {
          color: '#999',
          threshold: 0.1
        }
      }
    },
    legend: {
      show: false
    }
  });

The changes were based on a combination of the above suggestions proposed by @Hoffman and a patch suggested in Flot issue #355 by Luc Boudreau.

Answer 3

Ok, so I did it myself. Took me a while to understand how flot works internally, but eventually I found the part where I needed to change. On jquery.flot.pie.js change the drawSlice function (line 406 on Flot 0.7) to:

            function drawSlice(angle, color, fill)
            {   
                if (angle<=0)
                    return;


                if (fill) {
                    if (typeof color === "object") {
                        var grad= ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
                        var i;
                        var numColors= color.colors.length;
                        for (i=0; i< numColors ; i++) {
                            grad.addColorStop(i/(numColors-1), color.colors[i]);
                        }
                        ctx.fillStyle = grad; 
                    } else {
                        ctx.fillStyle = color;
                    }
                    ctx.fillStyle = color;
                } else {
                    ctx.strokeStyle = color;
                    ctx.lineJoin = 'round';
                }

don't remove the rest of the code after the if.

And like magic now you can define your series with radial gradient colors:

[{
            label: i, 
            data: Math.random() *1000,
            color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] }
}]

I will try to make a cool graph then I will screenshot it and post here.

EDIT: Here you go:

var d1= [];
    d1.push({
        label: "Crítico", 
        data: Math.random() *1000,
        color: { colors: [ "rgb(190,110,110)", "rgb(140, 70, 70)", "rgb(110, 50, 50)", "rgb(60, 10, 10)" ] }
    });
    d1.push({
        label: "Médio", 
        data: Math.random() *1000,
        color: { colors: [ "rgb(110,110,190)", "rgb(70, 70, 140)", "rgb(50, 50, 110)", "rgb(10, 10, 60)" ] }
    })
this.plot= $.plot($div, d1);

It's a lot better than using solid colors, but it can get a lot better, I'm just bad at picking colors. Now I found a small problem, legends don't work with my changes, no color will be displayed on them. I'm not willing to fix that since that functionality is present on the core Flot file (which is a lot bigger and complex than the pie plugin) and I don't have much free time to mess with that.