Pure JavaScript and HTML5 canvas Gauge – CanvGauge

2012-05-16 Ajax & Jquery

A tiny gauge by using pure JavaScript and HTML5 canvas. CanvGauge allows you to make various customizable gauges on an HTML page within element. It does not require any other external library like jQuery.

 Pure JavaScript and HTML5 canvas Gauge – CanvGauge

Why canvas gauge? Because it is compatible with most modern browsers and with mobile devices. For example, SVG, does not work on Android 2.x by default, but canvas do work.
BTW you can find your own reasons why to use canvas.

Configuration Options

The configuration options are provided to Gauge constructor as an object which could contain any of the parameters described below. The only one parameter is mandatory. So to create a gauge on a page it is enough to initialize it like this:

var gauge = new Gauge({ renderTo: 'canvas-id' }); gauge.draw();
  • renderTo – {String|HTMLCanvasElement} – HTML canvas element ID or element itself. This identifies the canvas element to which a gauge will be drawn. This parameter is mandatory to specify.
  • width – {Integer} – canvas width in pixels
  • height – {Integer} – canvas height in pixels
  • title – {String} – the title which should be drawn on a gauge. By default is false (no title to display)
  • minValue – {Number} – the minimal value which is used on a gauge bar. Default is 0
  • maxValue – {Number} – the maximum value which is used on a gauge bar. Default is 100
  • majorTicks – {Array} – array of a major tick marks. By default is ['0', '20', '60', '80', '100']
  • minorTicks – {Integer} – number of minor ticks to draw between major ticks on a gauge bar. Default is 10.
  • strokeTicks – {Boolean} – the flag which identifies if the ticks bar should be stroked or not. By default is true.
  • units – {String} – specify a units name which will be shown on a gauge. By default is false (do not display the units).
  • valueFormat – {Object} – specify how the value should be displayed. It is possible to specify an integer part of the value and the decimal part. By default is { int : 3, dec : 2 }
  • glow – {Boolean} – indicates if shadow glow should be drawn for gauge plate or not
  • animation – {Object} – Gauge needle animation config. Handles three options – delay, duration and animate function.

Examples:

animation : false /* no animation is used to display value on a gauge */ animation : { delay : 10, duration : 400, fn : 'elastic' } animation : { delay : 10, duration : 400, fn : function( p) { return Math.pow( p, 3) } /* cubic animation implementation */ }

colors - {Object} – the colors to use on a different gauge parts when drawing. Could be specified in hex (‘#000000′ – ‘#ffffff’) or RGB with/without the alpha channel. Defaults are:

plate      : '#fff',
majorTicks : '#444',
minorTicks : '#666',
title      : '#888',
units      : '#888',
numbers    : '#444',
needle     : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' }

highlights - {Array} – an array of highlights colors which could be drawn on a gauge bar. If specified as an empty array or false will not be drawn. By default is:

[{ from: 20, to: 60, color: '#eee' }, { from: 60, to: 80, color: '#ccc' }, { from: 80, to: 100, color: '#999' }]

Where from is a value to start highlight draw from, to – the value to which highlight draw to, color – the color to use.

Methods

  • Gauge( {Object} options) – constructor. Takes configuration options as an argument. Configuration options are described above.
  • draw() – draws the gauge (renders it on specified canvas)
  • clear() – immediately sets the gauge value to minimal one and re-draws the gauge
  • setValue( {Float} value) – sets a new value to display within the gauge. If animations is enabled – starts an animation.
  • getValue() – returns the current value on a gauge

Events

onready - A good practice is to use this even if it is required to dynamically work with the gauge (change the value) and be assured that the gauge was correctly initialized and drawn before the dynamic updates was started.

Examples:

var Gauge = new Gauge({ renderTo: 'canvas-id' });
gauge.draw();
// now handle initial gauge draw with onready event
gauge.onready = function() {
    // and do update of gauge value each second with the random value
    setInterval( function() {
        gauge.setValue( Math.random() * 100);
    }, 1000);
};
Usage example - internet speed test measure (Opera, Chrome, Firefox, Safari only)Download CanvGauge

Incoming tags: javascript gauge | gauge javascript | html5 gauge | javascript gauges | html5 gauges | gauge html5 | gauge jquery | jquery gauges | html5 canvas gauge | free javascript gauge |

Share diamonds
2 Comments
  1. Alsenitd Rausseo    Reply 2012-07-31 at 9:05 pm

    Thanks. very nice Gauge

  2. Dave    Reply 2012-07-21 at 7:42 am

    This is really cool. How do I get 2 gauges side by side? In other words, how to create logical gauge clusters? Thanks!

Javascript is disabled on your browser. You can't send comments without JavaScript.