JustGauge

by TheOrdinaryGeek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.js"></script>
<div style="display: inline-block">
  <!--<h1 id="title">Document Countdown</h2>-->
  <div id="g1"></div>
</div>

CSS

#g1 {
  width: 800px;
  height: 800px;
}

#title {
  text-align: center;
  font-size: 30px;
  color: #2F4F4F;
}

JavaScript

window.onload = function() {
  var g1 = new JustGage({
      id: "g1",
      value: 24692,/* <-- change this to your current value */
      min: 0,
      max: 30009,
      maxTxt: "30,009",
      titlePosition: 'above',
      width: 800,
      height: 800,
      pointer: true,
      textRenderer: function(val) {
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      },
      gaugeWidthScale: 1.2,
      pointerOptions: {
        toplength: -15,
        bottomlength: 10,
        bottomwidth: 12,
        color: '#8e8e93',
        stroke: '#ffffff',
        stroke_width: 3,
        stroke_linecap: 'round'
      },
      noGradient: true,
      customSectors: {
        ranges: [{
            color: '#4DFA90', /* green */
            lo: 0,
            hi: 10000
          },{
          color: '#FABE4D', /* amber */
          lo: 10000,
          hi: 20000
        },{
        color: '#FF5468', /* red */
          lo: 20000,
          hi: 30009
        }],
      length: 1 
    }
  });
}