# Raphael Tutorials

I recored two new tutorials about the raphaeljs library. Have a look:

and part two:

# Raphael Pie Chart Part 1

So awhile back I created a pie chart in raphael without the use of the SVG arc command. So, my old pie chart works, but it has lots of vector points – it’s all done with moveTo and lineTo. Rather than use the pie chart example from Raphael, I wanted to see if I could create my own from scratch. I got 80% there but then had to peak at how this (http://raphaeljs.com/growing-pie.html) example works. Here are a few arcs put together:

And here is the source code:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

SVG arc commands are pretty confusing. I had a few problems making this. The first was that I used “L” instead of “l”. Turns out “l” is relative positioning. Another problem was the large-arc-flag and the sweep-flag. I’m still not sure I fully grasp these.

Unlike the one in the example from raphaeljs.com I wanted my arc function to use radians. Over the years I’ve just gotten used to working in radians instead of degrees. I also prefer building a large string rather than using a series of arrays to define a path. Here is what the arc segment function looks like from raphaeljs.com:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 r.customAttributes.segment = function(x, y, r, a1, a2) { var flag = (a2 - a1) > 180, clr = (a2 - a1) / 360; a1 = (a1 % 360) * Math.PI / 180; a2 = (a2 % 360) * Math.PI / 180; return { path: [ ["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"] ], fill: "hsb(" + clr + ", .75, .8)" }; };

I formatted this a bit for readability.

# Raphael Animation Along a Path

In earlier versions of Raphael you could use the animateAlong() function to move something along a path. This method no longer exists in Raphael 2.0, instead a different technique is used. Here is the demo from raphaeljs.com: http://raphaeljs.com/gear.html. After tweaking this a little, I was able to create two custom attributes for use with Raphael’s animate() and attr() functions… “along” and “guide” where along is a percentage value (between 0 – 1) of how far along a given path you would like to move and guide is a reference to the path you want to move along. Here is an example:

Here are the custom attributes, “guide” and “along” wrapped in a function called addGuides().

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ;(function() { Raphael.fn.addGuides = function() { this.ca.guide = function(g) { return { guide: g }; }; this.ca.along = function(percent) { var g = this.attr("guide"); var len = g.getTotalLength(); var point = g.getPointAtLength(percent * len); var t = { transform: "t" + point.x + " " + point.y }; return t; }; }; })();

This is the code for the demo:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 click me to see animation