JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script type="text/javascript" src="http://highcharts.com/js/highcharts.js"></script>


<button id="set0">Set to 0</button>
 <button id="set80">Set to 80</button>
 <button id="set160">Set to 160</button>

<div id="container" style="height: 300px; position: relative"></div>

JavaScript

function drawDial(options) {

var renderTo = options.renderTo,
    value = options.value,
    centerX = options.centerX,
    centerY = options.centerY,
    min = options.min,
    max = options.max,
    minAngle = options.minAngle,
    maxAngle = options.maxAngle,
    tickInterval = options.tickInterval,
    ranges = options.ranges;
    
var renderer = new Highcharts.Renderer(
    document.getElementById(renderTo),
    400,
    300
);


// internals
var angle, 
    pivot;

function valueToAngle(value) {
    return (maxAngle - minAngle) / (max - min) * value + minAngle;
}

function setValue(value) {
    // the pivot
    angle = valueToAngle(value);
    
    var path = [
         'M',
         centerX, centerY,
         'L',
         centerX + 110 * Math.cos(angle), centerY + 110 * Math.sin(angle)
     ];
    
    if (!pivot) {
        pivot = renderer.path(path)
        .attr({
            stroke: 'black',
            'stroke-width': 3
        })
        .add();
    } else {
        pivot.attr({
            d: path
        });
    }
}

// background area
renderer.arc(centerX, centerY, 180, 0, minAngle, maxAngle)
    .attr({
        fill: {
            linearGradient: [0, 0, 0, 200],
            stops: [
                [0, '#FFF'],
                [1, '#DDD']
            ]
        },
        stroke: 'silver',
        'stroke-width': 1
    })
    .add();


// ranges
$.each(ranges, function(i, rangesOptions) {
    renderer.arc(
        centerX, 
        centerY, 
        170, 
        150, 
        valueToAngle(rangesOptions.from), 
        valueToAngle(rangesOptions.to)
    )
    .attr({
        fill: rangesOptions.color
    })
    .add();
});

// ticks
for (var i = min; i <= max; i += tickInterval) {
    
    angle = valueToAngle(i);
    
    // draw the tick marker
    renderer.path([
            'M',
            centerX + 170 * Math.cos(angle), centerY + 170 * Math.sin(angle),
            'L',
            centerX + 150 * Math.cos(angle), centerY + 150 *...