Unable to use multiple charts with differing gradients on same page

[iamdabe]

When using multiple instances of the radial-progress-chart each with a unique linear-gradients all instances use the last defined linear-gradient.

I've tracked the issue down to where the gradients are added to the svg:defs. All instances use the same name/id. I've modified this myself locally on lines 72 and 262. I've had to move the fill from the progress function (line 262) to line 146 due to issue with the animation. See code below.

Line 72 - Gradient definition, new variable to define unique instance.

    var gradientId = "gradient" + Math.random();
    series.forEach(function (item) {
        if (item.color.linearGradient || item.color.radialGradient) {
            var gradient = RadialProgressChart.Gradient.toSVGElement(gradientId + item.index, item.color);
            defs.node().appendChild(gradient);
        }
    });

Line 146 - Gradient added to svg path

    self.field.append("path").attr("class", "progress").attr("filter", "url(#" + dropshadowId + ")")
    .attr("class", "progress")
      .style("fill", function (item) {
          if (item.color.solid) {
              return item.color.solid;
          }

          if (item.color.linearGradient || item.color.radialGradient) {
              return "url(#" + gradientId + item.index + ")"
          }
      });

If you'd rather I can make a pull req.

[pablomolnar]

I you can wrap it up into a pull req that would be great. If not I'll try to patch it in the following days.

[coler-j]

If anyone was looking for this PR, there wasn't one. But you can find his code here: https://github.com/iamdabe/Glance/blob/master/Glance/_lib/d3.radial.js