angularjs - Use Raphael in Angular-Meteor project -

i have working raphael.js fiddle : http://jsfiddle.net/el4a/sbxjfafx/10/

now, need created svg inside angular-meteor project. need on several places has abstract. first question already: should use factory or directive this?

i've been trying make factory now, honest, have no idea i'm doing. don't have errors, image doesn't show up.

this raphael code inside 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;         };     (var = 0, ii = values.length; < ii; i++) {         total += values[i];     }     (var = 0; < 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 debug in browser, shows raphael functions skipped. havent clue why.

the console says : "referenceerror: raphael not defined", when watch raphael running version : "raphael: browser supports svg. running raphaël 2.1.2"

so i'm trying div id "svg", , draw image inside that. not happen , div remains empty.

i have injected new factory

angular.module('timeappapp') .controller('projectdetailcontroller', function($scope, $meteor, $state, $stateparams, svgfactory) 

and try draw image in matching view. <div id="svg"></div>

i know i'm doing 127things wrong , raphael/angular enthousiast crying blood, don't know :(

as added plus, kinda need able pass 3 values factory, instead of having them hardcoded.

thanks in advance drudging through mess!

i'm not sure how, worked out. ditched factory idea, , used directive. worked without issues.