JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

CSS

div {
    border:1px solid blue;
    width:260px;
    height:260px;
}

JavaScript

$(document).ready(function () {
    var paper = Raphael(
        $('<div />').appendTo('body').get(0),
        260, 260);
    
    paper.ca.gaugeArc = function (cx, cy, value, total, radius, startingIncline, endingIncline) {
        //startingIncline = (startingIncline === undefined) ? 0 : Math.max(-89, Math.min(89, startingIncline));
        //endingIncline = (startingIncline === undefined) ? 180 - startingIncline : Math.max(91, Math.min(269, endingIncline));
        
        var alpha = Math.abs(endingIncline - startingIncline) / total * value,
            a = (180 - alpha) * Math.PI / 180,
            x = cx + radius * Math.cos(a),
            y = cy - radius * Math.sin(a),
            path;
        
        path = [
            ["M", cx - radius, cy],
            ["A", radius, radius,
             0,
             +(alpha > 180),
             1,
             x,
             y]
        ];
        return {
            path: path
        };
    };
    
    paper.ca.gaugeArcZone = function (cx, cy, fromPercentage, toPercentage, radius, startingIncline, endingIncline) {
        var arc = this.paper.path().attr({
            gaugeArc: [cx, cy, 100, 100, radius, startingIncline, endingIncline]
        }),
            length = arc.getTotalLength(),
            path = arc.getSubpath(length * fromPercentage, length * toPercentage);
        
        arc.remove();
        
        return {
            path: path
        }
    };
    
    // ----------------------------------- Arc
    var cx = 130,
        cy = 130,
        radius = 110,
        startAngle = -45,
        endAngle = 225;
    
    paper.path().attr({
        'stroke':'#000000',
        'stroke-width':2,
        'gaugeArcZone': [
            cx,
            cy,
            0,
            1,
            radius,
            startAngle,
            endAngle
        ]
    })
    .rotate(startAngle, cx, cy);
    
    // ----------------------------------- Ticks
    
    var totalAngle = endAngle - startAngle,
    ...