While attempting to recreate and update this chart, I successfully created a separate chart but encountered difficulties with achieving the second progress.
The secondary chart
<div id="radial-progress-vha">
<div class="circle-vha">
<div class="mask-vha full-vha">
<div class="fill-vha"></div>
</div>
<div class="mask-vha half-vha">
<div class="fill-vha"></div>
<div class="fill-vha fix-vha"></div>
</div>
<div class="shadow-vha"></div>
</div>
<div class="inset-vha">
<div class="percentage-vha">22.17</div>
</div>
</div>
Realizing that each graph should be unique, I duplicated the original CSS with different names. This is where things started to fall apart.
The JavaScript code
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function() {
var rotation = Math.floor((180)*.123);
var fix_rotation = rotation;
for(i in transform_styles) {
$('.circle .fill, .circle .mask.full').css(transform_styles[i],'rotate(' + rotation + 'deg)');
//$('.circle .mask.left').css(transform_styles[i], 'rotate(' + rotation + 'deg)');
$('.circle .fill.fix').css(transform_styles[i],'rotate(' + fix_rotation + 'deg)');
}
}
setTimeout(window.randomize, 200);
$('#radial-progress-vha');