Customizable & Animated jQuery / HTML5 Gauge Meter Plugin

Customizable & Animated jQuery / HTML5 Gauge Meter Plugin
File Size: 25 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

Main features:

  • Canvas based. No png or jpg required.
  • Simple and lightweight (~6kb).
  • Highly customizable and styleable.
  • 16 built-in themes.
  • Custom legends & labels.
  • Displays either a full circle, semi-circle or an arched-circle.

Basic usage:

1. Place the jQuery GaugeMeter.js plugin after the latest version of jQuery JavaScript library.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="jquery.AshAlom.gaugeMeter-2.0.0.min.js"></script> 

2. Create a basic gauge meter with plain html and html5 data attributes.

<div class="GaugeMeter" 
     data-percent="60" 
     data-label="Percent" 
     >
</div>

3. Apply custom CSS styles to the gauge meter.

.GaugeMeter {
  position: Relative;
  text-align: Center;
  overflow: Hidden;
  cursor: Default;
  display: inline-block;
}

.GaugeMeter SPAN, .GaugeMeter B {
  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;
  margin: 0 23%;
}

.GaugeMeter[data-style="Semi"] B {
  width: 80%;
  margin: 0 10%;
}

.GaugeMeter S, .GaugeMeter U {
  text-decoration: None;
  font-size: .60em;
  font-weight: 200;
  opacity: .6;
}

.GaugeMeter B {
  color: #000;
  font-weight: 200;
  opacity: .8;
}

4. Initialize the plugin and done.

$(".GaugeMeter").gaugeMeter();

5. All html5 data attributes.

  • data-percent: Any positive integer, between 0 to 100. The value to set the gauge meter to.
  • data-used: Any positive integer. Display a percentage of a value that overrides any data-percent defined count.
  • data-total: Any positive integer. Display a percentage of a value that overrides any data-percent defined count.
  • data-text: ny short string. Replaces the data-percent count in the center of the gauge.
  • data-prepend: Any string (2 bytes max). Adds this text before the percent count in the center of the gauge.
  • data-append: Any string (2 bytes max). Adds this text after the percent count in the center of the gauge. Typical use would be a "%" symbol.
  • data-size: Any positive integer. Width & height of the gauge meter in pixels.
  • data-width: Any positive integer. Thickness of the gauge meter progress bar in pixels.
  • data-style: Full, Semi or Arch  Displays either a full circle, semi-circle or an arched-circle.
  • data-color: Hex values (#FFFFFF), Red-Green-Blue-Alpha color space (RGBa(255,255,255,1.0)) or HTML color-name (Red) The foreground-color of the gauge meter's progress bar.
  • data-back: Hex values (#FFFFFF), Red-Green-Blue-Alpha color space (RGBa(255,255,255,1.0)) or HTML color-name (Green) The background-color of the gauge meter's progress bar.
  • data-theme: Red-Gold-Green, Red-Gold-Green, Green-Gold-Red, Green-Red, Red-Green, DarkBlue-LightBlue, LightBlue-DarkBlue, DarkRed-LightRed, LightRed-DarkRed, DarkGreen-LightGreen, LightGreen-DarkGreen, DarkGold-LightGold, LightGold-DarkGold, White, Black
  • data-animate_gauge_colors: 0 or 1.  When enabled, the foreground-color of the gauge meter's progress bar will cycle according to the color value, as directed by the data-theme.If enabled, this overrides any values specified by the data-color.
  • data-animate_text_colors: 0 or 1.  When enabled, the percentage text color of the gauge meter will cycle according to the color value, as directed by the data-theme. If enabled, this overrides any values specified by the data-label_color.
  • data-label: Any short string. Supplemental text label that can appear below the central percentage or text of the gauge meter.
  • data-label_color: Hex values (#FFFFFF), Red-Green-Blue-Alpha color space (RGBa(255,255,255,1.0)) or HTML color-name (Blue)  The foreground text color of the supplemental text label.
  • data-stripe: Any positive integers.  Show the gauge meter's progress bar in solid form or stripe form. If the value is greater than 0, the gauge meter's progress bar changes from a solid to a stripe, where the value is the thickness of the stripes.

This awesome jQuery plugin is developed by AshAlom. For more Advanced Usages, please check the demo page or visit the official website.