multiple radial-progress charts (js)

Question

I'm attempting to recreate and update this fiddle. I was able to create a separate chart but unable to achieve the second progress.

The second 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>

My understanding is that each graph should be unique therefore I copied the original css with a different name. This is where it fell apart.

The js

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');

Answer 1

I have a working fiddle: http://jsfiddle.net/uouxcLbd/

Your main issues were

• you didn't need to duplicate the definition of transform-styles
• The $('#radial-progress-va'); and $('#radial-progress-vha'); lines were unnecessary
• The second definition of window.randomize needed a different name
• The second randomize function needed to use your css classes with the -vha suffix
• You made a typo in the CSS - it was missing a single . so the .fill-vha selector didn't work