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
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?