gauge.js

by Barry Carter

HTML

<script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
<div class="t-speedometer">
  <canvas id="foo"></canvas>
  <span id="gauge1-txt"></span>
</div>

CSS

#gauge1-txt {
    font-weight: bold;
    font-size:80%;
    display: block;
    text-align: center;
}

#foo {
  width: 100%;
  height: 100%;
}

JavaScript

var opts = {
  angle: 0,
  lineWidth: 0.5,
  limitMax: 'true', 
  strokeColor: 'red',
  radiusScale: 1,
  generateGradient: true,
    pointer: {
    length: 0.5, // // Relative to gauge radius
    strokeWidth: 0.03, // The thickness
    color: 'orange' // Fill color
  },
  staticLabels: {
  font: "90% sans-serif",  // Specifies font
  labels: [],// [0, 25, 50, 75, 100],  // Print labels at these values
  color: "black",  // Optional: Label text color
  fractionDigits: 2  // Optional: Numerical precision. 0=round off.
},  // just experiment with them
  strokeColor: 'red',   // to see which ones work best for you
  staticZones: [
   {strokeStyle: "red", min: 0, max: 33}, // Yellow
   {strokeStyle: "orange", min: 33, max: 66}, // Green
   {strokeStyle: "green", min: 66, max: 100}, // Yellow
],
  generateGradient: true
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 100; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
var x = 4;
setInterval(gauge.set(x + 3),500);
var target = document.getElementById('foo'); // your canvas element
gauge.set(0);

// randomly change value
var randomize = function(){
  gauge.set(Math.floor(Math.random() * (100 - 1))); 
};
//setTimeout(function(){ setInterval(randomize, 5000); }, 1000);
//gauge.setTextField(document.getElementById("gauge1-txt"));
var goal = 60;
var val = 54;
var t = ((val/goal)*100);
var t = (66);

gauge.set(t); 
//gauge.set(20); // set actual value