How to display 3 progress bar that have different data using js and html.
First of all, sorry for my poor English, I hope you will understand me after all
I want 3 same circle to show 3 different data.
When I add 3 of the same js codes in which I change the “radialprogress” ID, I always see one progress bar.
I have this code
Html:
<div class="row">
<div>
<div style="width: 160px;float: left;margin-right: 0px;" id="radialprogress" ></div>
</div>
<div>
<div style="width: 160px;float: left;margin-right: 0px;" id="radialprogress" ></div>
</div>
<div>
<div style="width: 160px;float: left;margin-right: 0px;" id="radialprogress" ></div>
</div>
</div>
JS code which I also put in html:
<script>
var svg ;
function drawProgress(end){
d3.select("svg").remove()
if(svg){
svg.selectAll("*").remove();
}
var wrapper = document.getElementById('radialprogress');
var start = 0;
var colours = {
fill: '#12ea8d',
track: '#555555',
text: '#00C0FF',
stroke: '#172b4d',
}
var radius = 80;
var border = 12;
var strokeSpacing = 4;
var endAngle = Math.PI * 2;
var formatText = d3.format('.0%');
var boxSize = radius * 2;
var count = end;
var progress = start;
var step = end < start ? -0.01 : 0.01;
//Define the circle
var circle = d3.svg.arc()
.startAngle(0)
.innerRadius(radius)
.outerRadius(radius - border);
//setup SVG wrapper
svg = d3.select(wrapper)
.append('svg')
.attr('width', boxSize)
.attr('height', boxSize);
// ADD Group container
var g = svg.append('g')
.attr('transform', 'translate(' + boxSize / 2 + ',' + boxSize / 2 + ')');
//Setup track
var track = g.append('g').attr('class', 'radial-progress');
track.append('path')
.attr('fill', colours.track)
.attr('stroke', colours.stroke)
.attr('stroke-width', strokeSpacing + 'px')
.attr('d', circle.endAngle(endAngle));
//Add colour fill
var value = track.append('path')
.attr('fill', colours.fill)
.attr('stroke', colours.stroke)
.attr('stroke-width', strokeSpacing + 'px');
//Add text value
var numberText = track.append('text')
.attr('fill', colours.text)
.attr('text-anchor', 'middle')
.attr('dy', '.5rem');
//update position of endAngle
value.attr('d', circle.endAngle(endAngle * end));
//update text value
numberText.text(formatText(end));
}
drawProgress(14/100)
</script>
Thank You