shtzr840329 / gaugemeter Goto Github PK

#GaugeMeter.js

An elegant and dynamic animated graphical gauge meter built with jQuery. GaugeMeter.js is highly customizable and includes full-radial, semi-radial & arch dials.

DEMO: http://ashalom.github.io/GaugeMeter

REPO: https://github.com/AshAlom/GaugeMeter

Copyright AshAlom.com 2011. All rights Reserved.

• Just one script, there is no dependencies.
• Lots of built-in themes.
• HTML5 renders the Canvas content without images.
• Highly customizable and extensible.
• Rich feature sets.
• Add custom legends & labels.
• Robust & polished.
• Support for any page size and page color.
• Configure via data attributes or group settings.

• jQuery 1.10.2
• HTML5 compatible web browser.

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

jQuery & JavaScript Code

<script src="./jquery.AshAlom.gaugeMeter-2.0.0.min.js"></script>
<script>
	$(document).ready(function(){
		$(".GaugeMeter").gaugeMeter();
	});
</script">

CSS Styles

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

.GaugeMeter SPAN,
    .GaugeMeter B{
    	Margin:          0 23%;
    	Width:           5%;
    	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:       .49em;
    	Opacity:         .5;
}

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

HTML Code

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

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

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-text="Spendings"
	data-total="1024"
	data-used="256"
	data-prepend="$"
	data-append=".00"
	data-size="200"
	data-width="2"
	data-style="Semi"
	data-color="Blue"
	data-back="Silver"
	data-theme="Red-Gold-Green"
	data-animate_gauge_colors="1"
	data-animate_text_colors="1"
	data-label="VISA Card"
	data-label_color="#F00"
	data-stripe="2"
></div>

The form of the gauge meter can be manipulated by means of the following parameters. These parameters can be passed in to the library via HTML5 tag data attributes, as illustrated in the HTML example code, above. The following table elaborates upon each of the parameter properties.

2.0.0 - 21st October, 2015 @ 4:29 PM PST

• Initial public release

1.0.0 - 11th June, 2012

• Initial developer release.

0.0.1 - 9th December, 2011

• Initial development.

MIT