Dynamic animated graphical gauge meter jquery plugin

by

Dynamic animated graphical gauge meter jquery plugin-
An elegant and dynamic animated graphical gauge meter built with jQuery. GaugeMeter.js is highly customizable and includes full-radial, semi-radial & arch dials. GaugeMeter.js is a versatile jQuery gauge plugin which takes advantage of HTML5 canvas to render animated gauge meters and dials with plenty of customization options.
GaugeMeter.js jQuery Plugin by Ash Alom
Features:

  • Just one script, there is no dependencies.
  • Built-in themes.
  • HTML5 renders the Canvas content without images.
  • Add custom text & label.
  • Support for any page size and page color.
  • Configure via data attributes, object properties on call or default settings.
  • Update via jQuery call.



Libraries

Include the following jQuery & JavaScript Code, CSS and HTML code to render a minimal form of the GaugeMeter.

HTML

Basic Implementation. The code below is all you will need to render a basic gauge meter with 40 indication.

CSS

Add CSS on page for styling GaugeMeter

.GaugeMeter{
	Position:        Relative;
	Text-Align:      Center;
	Overflow:        Hidden;
	Cursor:          Default;
}

.GaugeMeter SPAN,
    .GaugeMeter B{
    	Margin:          0 23%;
    	Width:           54%;
    	Position:        Absolute;
    	Text-align:      Center;
    	Display:         Inline-Block;
    	Color:           RGBa(0,0,0,.8);
    	Font-Weight:     100;
    	Font-Family:     "Open Sans", Arial;
    	Overflow:        Hidden;
    	White-Space:     NoWrap;
    	Text-Overflow:   Ellipsis;
}
.GaugeMeter[data-style="Semi"] B{
	Margin:          0 10%;
	Width:           80%;
}

.GaugeMeter S,
    .GaugeMeter U{
    	Text-Decoration: None;
    	Font-Size:       .5em;
    	Opacity:         .5;
}

.GaugeMeter B{
	Color:           Black;
	Font-Weight:     300;
	Font-Size:       .5em;
	Opacity:         .8;
}

JS

Initialize the plugin to render a minimal form of the GaugeMeter.

$(document).ready(function(){
		$(".GaugeMeter").gaugeMeter();
	});



Below is a list of all the optional parameters, see the Parameter Definitions for more details on how to utilize these data attributes.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome jQuery plugin is developed by Mictronics. Visit their official github repository for more information and follow for future updates.


Published by Rohit