g.raphael.js gradient effect on pie chart

Question

I user raphael.js to draw my images/graphs on my website, and I'm having trouble implementing a gradient effect on my pie chart.

I call it that way :

<script type="text/javascript" charset="utf-8">
                window.onload = function () {
                    var r = Raphael("holder");
                    var pie = r.g.piechart(250, 240, 180, <?php echo $vals; ?>,{colors: ["#fff", "#cc3333", "#f200fd"]});
                };
            </script>

I've read on the documentation that gradients effects are possible, like it is shown in some examples.

I tried : {colors: ["r#fff-#ccc","r#fff-#ccc","r#fff-#ccc"]} or {gradients : ["r#fff-#ccc","r#fff-#ccc","r#fff-#ccc"} but in vain..

Anyone tried it?

Thx a lot!

Answer 1

This is how I solved it for the shape beneath linechart:

  var linechart = r.g.linechart(10,10,300,220,[1,2,3,4,5],[10,20,15,35,30], {"colors":["#444"], "symbol":"s", axis:"0 0 1 1"});

  linechart.shades[0].attr({
        "fill": "90-#fff:20-#000",
        "fill-opacity": 0.1
  });

I think it's just a matter of finding the element that you need to apply the gradient for and change the fill attribute as shown above.

Here's documentation on the attr function: http://raphaeljs.com/reference.html#attr

and I was able to navigate the linechart object hierarchy by calling

console.log(linechart);

and then looking at the javascript console in Google Chrome. (I'm sure this will also work in Firefox/Firebug).

Answer 2

as Rav said, you should really check the docs, all the necessary info to create a gradient is there (http://raphaeljs.com/reference.html#attr), look for the fill part.

Anyways, the short answer is:

"90-#7BCC55-#A7FB73"

And more specific in your case, for a pie chart put this line before creating the chart:

r.g.colors = ["90-#7BCC55-#A7FB73", "45-#0B73D2-#0E99FA", "0-#E37201-#FC9B03"];

Remember that you need to add the same amount of colors as slices in your chart there are going to be.