How can I add a marker to a donut chart created with Raphael.js?

Question

I need help adding a marker to this donut chart script I've modified utilizing raphael.js. I've got most everything ready to go except for a way to dynamically generate a triangular marker. JSFiddle: http://jsfiddle.net/aP7MK/73/ ``` function donutChart(total, goal, avg){ var paper = Raphael("canvas", 400, 400); paper.customAttributes.arc = function (xloc, yloc, value, total, R) { var alpha = 360 / total * value, a = (90 - alpha) * Math.PI / 180, x = xloc + R * Math.cos(a), y = yloc - R * Math.sin(a), path; if (total == value) { path = [ ["M", xloc, yloc - R], ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R] ]; } else { path = [ ["M", xloc, yloc - R], ["A", R, R, 0, +(alpha > 180), 1, x, y] ]; } return { path: path }; }; var backCircle = paper.circle(100, 100, 40).attr({ "stroke": "#7BC2E5", "stroke-width": 14 }); var theArc = paper.path().attr({ "stroke": "#f5f5f5", "stroke-width": 14, arc: [100, 100, 0, 100, 40] }); //event fired on each animation frame eve.on("raphael.anim.frame.*", onA…

Accepted Answer

As @Ian said you can use `path` to draw triangle:

```
// triangle
var tri = paper.path("M100 50 L90 40 L110 40 L100 50 Z");
```

See the docs about using `path` (its commands).

Then you need to rotate/translate (again as @Ian said) but SVG helps you here providing `rotate` method which takes not only angle of rotation but also coordinates of point to rotate around (it translates coordinates for you)

```
tri.rotate((howMuch[2] - prev_percent) * 3.6, 100, 100);
```

The only thing here to note is that you need difference of previous and current percentage.

The working fiddle

How can I add a marker to a donut chart created with Raphael.js?

Solution

Problem