gauge.coffee gauge.min.js

Example

Variant selection

Options:















Features

Usage

var opts = {
  angle: 7, // The span of the gauge arc
  lineWidth: 5, // The line thickness
  radiusScale: 1.0, // Relative radius
  pointer: {
    length: 10, // // Relative to gauge radius
    strokeWidth: 0, // The thickness
    color: '#000000' // Fill color
  },
  limitMax: false,     // If false, max value increases automatically if value > maxValue
  limitMin: false,     // If true, the min value of the gauge will be fixed
  colorStart: '0',   // Colors
  colorStop: '0',    // just experiment with them
  strokeColor: '0',  // to see which ones work best for you
  generateGradient: true,
  highDpiSupport: true     // High resolution support
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 3000; // set animation speed (32 is default value)
gauge.set(1500); // set actual value

The Gauge class handles drawing on canvas and starts the animation.

Advanced options

jQuery plugin

Gauge.js does not require jQuery. Anyway, if you use jQuery you may use the following plugin:

$.fn.gauge = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.gauge) {
      data.gauge.stop();
      delete data.gauge;
    }
    if (opts !== false) {
      data.gauge = new Gauge(this).setOptions(opts);
    }
  });
  return this;
};

Supported browsers

Gauge.js has been (not yet!) successfully tested in the following browsers:

Changes

Version 1.3.5 (08.07.2017)

Version 1.3.4 (13.05.2017)

Version 1.3.3 (09.04.2017)

Improved protection for non-numerical inputs to .set(), which could cause problems like #124.

Version 1.3.2 (11.02.2017)

Bug-fixes (#116 and #117), performance improvements.

Version 1.3.1 (05.02.2017)

Highlights:

A couple of other bugs and issues sorted out as well.

Version 1.3 (07.01.2017)

This version is a mix of new functionality and various smaller fixes and improvements. Some of the inner transformations and options definition have been slightly altered/improved and made more consistent.

Highlights:

Version 1.2.1 (9.03.2014)

Version 1.2 (16.08.2012)

Version 1.1 (15.08.2012)

Version 1.0 (27.6.2012)

Contact

If you encounter any problems, please use the GitHub issue tracker.
If you like gauge.js and use it in the wild, let me know.
If you want to contact me, drop me a message via email