JSFiddle - React, Tailwind, and code Playground

by berni

HTML

<script src="http://bernii.github.com/gauge.js/dist/gauge.min.js"></script>
<html>
<head>
    <title>Gauge JS simple use scenario</title>
</head>
<body>
    <div id="gauge">
        <canvas id="gauge-canvas"></canvas>
        <div id="gauge-text"></div>
    </div>
</body>
</html>

CSS

#gauge{
    width: 300px;
    text-align: center;
}
#gauge-text{
    font-size: 2em;
    font-weight: bold;
}

JavaScript

var options = {
    maxValue: 100,
    animationSpeed: 32,
    lines: 19,
    angle: 0.15,
    lineWidth: 0.34, // The line thickness
    pointer: {
      length: 1, // The radius of the inner circle
      strokeWidth: 0.027, // The rotation offset
      color: '#333' // Fill color
    },
    colorStart: '#0F6E38',   // Colors
    colorStop: '#0ACF38',    // just experiment with them
    strokeColor: '#B81A1A',   // to see which ones work best for you
    generateGradient: true
};

var gauge = new Gauge(document.getElementById("gauge-canvas"));
gauge.setTextField(document.getElementById("gauge-text"));
gauge.setOptions(options); // create sexy gauge!
gauge.maxValue = options.maxValue; // set max gauge value
gauge.animationSpeed = options.animationSpeed; // set animation speed (32 is default value)
gauge.set(0);

// randomly change value
var randomize = function(){
  gauge.set(Math.floor(Math.random() * (100 - 1))); 
};
setTimeout(function(){ setInterval(randomize, 500); }, 1000);