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!
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).