javascript - Why can't I see the colors on the Raphael.js pie chart demo? -

i've replicated raphael pie chart demo @ http://jsfiddle.net/s6dew/:

raphael.fn.piechart = function (cx, cy, r, values, labels, stroke) {     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 angle = 0,         total = 0,         start = 0,         process = function (j) {             var value = values[j],                 angleplus = 360 * value / total,                 popangle = angle + (angleplus / 2),                 color = raphael.hsb(start, .75, 1),                 ms = 500,                 delta = 30,                 bcolor = raphael.hsb(start, 1, 1),                 p = sector(cx, cy, r, angle, angle + angleplus, {                     fill: "90-" + bcolor + "-" + color,                     stroke: stroke,                     "stroke-width": 3                 }),                 txt = paper.text(cx + (r + delta + 55) * math.cos(-popangle * rad), cy + (r + delta + 25) * math.sin(-popangle * rad), labels[j]).attr({                     fill: bcolor,                     stroke: "none",                     opacity: 0,                     "font-size": 20                 });             p.mouseover(function () {                 p.stop().animate({                     transform: "s1.1 1.1 " + cx + " " + cy                 }, ms, "elastic");                 txt.stop().animate({                     opacity: 1                 }, ms, "elastic");             }).mouseout(function () {                 p.stop().animate({                     transform: ""                 }, ms, "elastic");                 txt.stop().animate({                     opacity: 0                 }, ms);             });             angle += angleplus;             chart.push(p);             chart.push(txt);             start += .1;         };     (var = 0, ii = values.length; < ii; i++) {         total += values[i];     }     (i = 0; < ii; i++) {         process(i);     }     return chart; };  $(function () {     var values = [],         labels = [],         json = [{             "units": "",             "total": "1682.59",             "lbs": "82500.00",             "material": "stainless steel"         }, {             "units": "345",             "total": "18076.19",             "lbs": "49110.50",             "material": "aluminum"         }, {             "units": "480",             "total": "6793.75",             "lbs": "6950.00",             "material": "cardboard cores"         }, {             "units": "",             "total": "353.44",             "lbs": "3482.50",             "material": "scrap metal"         }]     (i = 0; < json.length; i++) {         labels.push(json[i].material);         values.push(parsefloat(json[i].lbs));     }     raphael("holder", 700, 700).piechart(350, 350, 200, values, labels, "#fff"); }); 

however, when put identical code on website (http://www.completerecycling.com/test), instead of colorful pie chart slices, black pie chart in chrome, , transparent 1 in firefox. doing differently that's breaking color scheme?

it’s because of <base> tag on site.

raphaël uses ids reference fill colors (the fill="url(#…)" attribute of each coloured piece of pie).

these references don’t work on http://www.completerecycling.com/test because resolve http://www.completerecycling.com/test/ (base href) plus #… color definition (instead of http://www.completerecycling.com/test#…).

either change base href http://www.completerecycling.com/test without trailing slash, remove base tag altogether or redirect http://www.completerecycling.com/test http://www.completerecycling.com/test/ (which works fine).