Using Raphael for pie charts.

[Jason]

Hi,

I am new to Raphael and am primarily interested in using it to create
an interactive pie chart, like the demo http://raphaeljs.com/pie.html.
I am also new to javascript so I am having a hard time customizing the
pie chart for my use.

I am wondering if there might be a way to replace the fill of the
segments of the pie with images, or colors of my choosing?

Any help on the subject would be greatly appreciated.

Thank you.

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

[Antoine Gassot]

Hi!

You might want to take a look at: http://g.raphaeljs.com/

You can specify colors in the fifth parameter, like this:

var pie = r.g.piechart(250, 120, 75, data,

{legend: labels, legendpos: "est",

colors: ["#1C7B1C", "#EC6A01", "#A01E1E"]});

If you have some trouble with this plugin, you can check already reported bugs (http://github.com/DmitryBaranovskiy/g.raphael/issues), they often have what you need to resolve them.

Hope it'll help.

2010/4/26 Jason <jason...@gmail.com>

[Jason]

Thanks for the response.
I am using raphael.js, g.raphael.js, g.pie.js

Here is my code:

var r = Raphael("holder");
r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-
serif";

r.g.text(320, 100, "Interactive Pie Chart").attr({"font-
size": 20});

var pie = r.g.piechart(320, 240, 100, [2, 3, 3, 3, 3, 1,
1.4,], {href: [ 'http://perksconsulting.com', 'http://
www.yahoo.com' ], colors:['red', 'blue', 'green', 'yellow', 'orange',
'black', 'gray']}

);

pie.hover(function(){
this.sector.stop();
this.sector.scale(1.5, 1.5, this.cx, this.cy);
if (this.label) {
this.label[0].stop();
this.label[0].scale(1.5);
this.label[1].attr({"font-weight": 800});
}
}, function() {
this.sector. animate({scale: [1, 1, this.cx, this.cy]}, 500,
"bounce");
if (this.label) {
this.label[0].animate({scale: 1}, 500, "bounce");
this.label[1].attr({"font-weight": 400});
}
});

As I have it I am able to control the colors of the segments
individually, but don't know how to replace these colors with images.
Is this possible?

I am not really sure how to handle images in javascript, this is my
first major foray into the subject

Thanks,

Jason

On Apr 27, 3:36 am, Antoine Gassot <antoin...@beemoov.com> wrote:
> Hi!
>
> You might want to take a look at:http://g.raphaeljs.com/
> You can specify colors in the fifth parameter, like this:
>
> var pie = r.g.piechart(250, 120, 75, data,
> {legend: labels, legendpos: "est",
> colors: ["#1C7B1C", "#EC6A01", "#A01E1E"]});
>
> If you have some trouble with this plugin, you can check already reported
> bugs (http://github.com/DmitryBaranovskiy/g.raphael/issues), they often have
> what you need to resolve them.
>
> Hope it'll help.
>

> 2010/4/26 Jason <jason.go...@gmail.com>

>
>
>
> > Hi,
>
> > I am new to Raphael and am primarily interested in using it to create

> > an interactive pie chart, like the demohttp://raphaeljs.com/pie.html.

> > I am also new to javascript so I am having a hard time customizing the
> > pie chart for my use.
>
> > I am wondering if there might be a way to replace the fill of the
> > segments of the pie with images, or colors of my choosing?
>
> > Any help on the subject would be greatly appreciated.
>
> > Thank you.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Raphaël" group.
> > To post to this group, send an email to raph...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > raphaeljs+...@googlegroups.com<raphaeljs%2Bunsu...@googlegroups.com>
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/raphaeljs?hl=en-GB.
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.
> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

> For more options, visit this group athttp://groups.google.com/group/raphaeljs?hl=en-GB.

[J]

I'm not sure about images, but if you have something like:

var paper = Raphael(50,50,200,200);

then you can just do:

paper.g.colors = ["#ff0000", "#00ff00", "#0000ff"];

and in this case the pie chart would use red green and blue.