0

I would like to draw two donut charts concurrently on two different html elements with different parameter. For example, first donut chart ends with 99% and the second chart ends with 70%.

The first chart works properly but for the second one does not. I used the same javascript code to draw the two chart but just d3.select() different element by id and the allocated number is different. The following is the javascript code.

<html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<div id="docsChart_slim"></div>
</body>
<script type="text/javascript">
var width = 135,
    height = 135,
    twoPi = 2 * Math.PI,
    progress = 0,
    allocated = 4257000,
    total = 4300000,
    formatPercent = d3.format(".0%");

var arc = d3.arc()  
    .startAngle(0)
    .innerRadius(58)
    .outerRadius(66);

var svg = d3.select("#docsChart_slim").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
var meter = svg.append("g")
    .attr("class", "funds-allocated-meter");

meter.append("path")
    .attr("class", "background")
    .attr("d", arc.endAngle(twoPi));

var foreground = meter.append("path")
    .attr("class", "foreground");

var percentComplete = meter.append("text")
    .attr("text-anchor", "middle")
    .attr("class", "percent-complete")
    .attr("dy", "0em");

/*var description = meter.append("text")
    .attr("text-anchor", "middle")
    .attr("class", "description")
    .attr("dy", "2.3em")
    .text("Total Complete");*/

var i = d3.interpolate(progress, allocated / total);

 d3.transition().duration(1000).tween("progress", function() {
  return function(t) {
    progress = i(t);
    foreground.attr("d", arc.endAngle(twoPi * progress));
    percentComplete.text(formatPercent(progress));
  };
});
</script>
</html>

Also the result is

enter image description here

I have checked some documentation about execute transition() on the same element but what I am trying to do is drawing charts on the different elements.

What should I do?

pmkro
  • 2,542
  • 2
  • 17
  • 25
bazhua324
  • 136
  • 2
  • 4
  • 1
    Right now your code just creates 1 chart. Please, share the code that you used for creating two charts, **even if that code doesn't work**. Only that way we can debug it. – Gerardo Furtado Mar 15 '18 at 23:05
  • We can't say for sure without seeing the code for both, but if you really did just copy and paste what's in the example with different select etc to generate the second chart, you'll run into some pretty typical javascript scoping issues and variable collision because you're redefining variables in the global namespace, which would explain the broken second chart. Does it change the result if you, for example, [wrap each one in `(function(){ ...code here... })()`](https://stackoverflow.com/questions/2421911/what-is-the-purpose-of-wrapping-whole-javascript-files-in-anonymous-functions-li)? – user56reinstatemonica8 Mar 15 '18 at 23:13
  • Hi I have tried to separated the javascript code within two separate functions but still one could not working. I would like to post the entire javascript but it seems that I could not edit my question. Only thing I can do is to make comment. – bazhua324 Mar 16 '18 at 11:16

0 Answers0