Dynamic animated graphical gauge meter jquery plugin

by Posted on

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.

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="GaugeMeter.js"></script>

HTML

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

<div class="GaugeMeter" id="GaugeMeter_1" data-percent="40"></div>

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.

<div class="GaugeMeter" id="GaugeMeter_1"
    data-percent="10"
	data-used="256"
	data-total="1024"
	data-size="200"
	data-prepend="$"
	data-append=".00"
	data-theme="Red-Gold-Green"
	data-color="Blue"
	data-back="Silver"
	data-width="2"
	data-style="Semi"
	data-stripe="2"
	data-animationstep = 0
	data-animate_gauge_colors="1"
	data-animate_text_colors="1"
	data-label="VISA Card"
	data-label_color="#FF0000"
	data-text="Spendings"
        data-text_size="0.22"
	data-fill="#FFFFFF"
        data-showvalue=0
></div>

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 admin