easyPieChart-rainbow&indicator demo.js

$('.chart').each(function() {
    var $this = $(this);
    var lineWidth = 15,
        indicatorHeight = 20,
        scaleLength = indicatorHeight - lineWidth;
    var canvasWidth = $this.width();
    var rOutter = canvasWidth / 2 - scaleLength,
        rInner = rOutter - lineWidth - 3;
    var rotate = -90;
    
    $this.easyPieChart({
        trackColor: '#eee',
        lineWidth: lineWidth,
        scaleColor: '#333',
        scaleLength: scaleLength,
        size: canvasWidth,
        lineCap: 'square',
        animate: 2000,
        rotate: rotate,
        onStep: function (from, to, percent) {
            var ctx = this.renderer.getCtx();
            var canvas = this.renderer.getCanvas();
            
            // Draw indicator
            var angleTopPoint = (1 - (percent + 1) / 50) * Math.PI,
                angleBottomPoint1 = angleTopPoint - Math.PI / 36,
                angleBottomPoint2 = angleTopPoint + Math.PI / 36;
            var calculate = function(radius, radian) {
                var rotatedRadian = radian + rotate/180 * Math.PI;
                var result = [radius * Math.sin( rotatedRadian ), radius * Math.cos( rotatedRadian )];
                return result;
            };
            ctx.fillStyle = '#333';
            ctx.beginPath();
            ctx.moveTo.apply( ctx, calculate(rOutter + scaleLength, angleTopPoint) );
            ctx.lineTo.apply( ctx, calculate(rInner, angleBottomPoint1) );
            ctx.lineTo.apply( ctx, calculate(rInner, angleBottomPoint2) );
            ctx.closePath();
            ctx.fill();
        },
        barColor: function(percent) {
            // Add rainbow background
            var ctx = this.renderer.getCtx();
            var canvas = this.renderer.getCanvas();
            var gradient = ctx.createLinearGradient(canvasWidth/2, 0, -canvasWidth/2,0);
            gradient.addColorStop(0, 'red');
            gradient.addColorStop(1 / 3, 'orange');
            gradient.addColorStop(2 / 3, 'yellow');
            gradient.addColorStop(1, 'green');
            return gradient;
        }
    });
});