Use Raphael in Angular-Meteor project - angularjs

Question

I have a working raphael.js fiddle : http://jsfiddle.net/El4a/sbxjfafx/10/
Now, I need the created svg inside my angular-meteor project. I need it on several places so it has to be abstract. So first question already: should I use a factory or a directive for this?
I've been trying to make it a factory for now, but to be honest, I have no idea what I'm doing. I don't have any errors, but the image doesn't show up.
This is the raphael code inside a factory :
'use strict';
angular.module('timeAppApp').factory('svgFactory', function($rootScope){
Raphael.fn.pieChart = function (cx, cy, r, values) {
var paper = this,
rad = Math.PI / 180,
chart = this.set();
function sector(cx, cy, r, startAngle, endAngle, params) {
var x1 = cx + r * Math.cos(-startAngle * rad),
x2 = cx + r * Math.cos(-endAngle * rad),
y1 = cy + r * Math.sin(-startAngle * rad),
y2 = cy + r * Math.sin(-endAngle * rad);
return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}
var bcolors = ['#d667cd','#3D8C1E','#00b9ff'];
var colors = ['FF5DF4','#69F233', '#0080B0'];
var angle = 0,
total = 0,
start = 0,
process = function (j) {
var value = values[j],
angleplus = 360 * value / total,
popangle = angle + (angleplus / 2),
// color = "hsb(" + start + ", 1, .5)",
color = colors[j%colors.length],
ms = 500,
delta = 30,
//bcolor = "hsb(" + start + ", 1, 1)",
bcolor = bcolors[j%bcolors.length],
p = sector(cx, cy, r, angle, angle + angleplus, {gradient: "100-" + bcolor + "-" + color}),
txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad));
angle += angleplus;
chart.push(p);
chart.push(txt);
start += .1;
};
for (var i = 0, ii = values.length; i < ii; i++) {
total += values[i];
}
for (var i = 0; i < ii; i++) {
process(i);
}
return chart;
};
Raphael.fn.circle = function(cx, cy, r){
var paper = this,
rad = Math.PI / 180,
chart = this.set();
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
return chart;
};
var r;
var svg = function (raphael) {
$(function () {
var values = [20, 60, 20];
r = raphael("svg", 700, 700);
r.pieChart(350, 350, 100, values, "#fff");
r.circle(350, 350, 85).attr({ fill: 'white' });
})
};
svg(raphael);
return{r : r};
When I debug in the browser, it shows that all the raphael functions get skipped. I havent a clue as to why.
The console says : "ReferenceError: raphael is not defined",
but when I watch Raphael I get a running version :
"Raphael: Your browser supports SVG. You are running Raphaël 2.1.2"
So I'm trying to get the div with id "svg", and draw the image inside that. This does not happen and the div remains empty.
I have injected the new factory
angular.module('timeAppApp')
.controller('ProjectDetailController', function($scope, $meteor, $state, $stateParams, svgFactory)
and try to draw the image in the matching view. <div id="svg"></div>
I know I'm probably doing 127things wrong and raphael/angular enthousiast are crying blood, but I really don't know what :(
As an added plus, I also kinda need to be able to pass 3 values to the factory, instead of having them hardcoded.
Thanks in advance for drudging through this mess!

Answer 1

I'm not sure how, but it all worked out. I ditched the factory idea, and used a directive. This worked without any issues.