Animated Gauge Meter jQuery plugin

Mictronics May 26, 2023

ADN
animated-gauge-meter-jquery-plugin

Live Preview Download

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

Plugin Features

  • Just one script, there is no dependencies other. than jQuery
  • 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
  • Cross browser compatible

Plugin Implementation

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

Below is a list of all the optional parameters, see the Parameter Definitions for more details on how to utilize these data attributes.
Attribute Optional Defaults Values Description
data-percent No 0 Any positive integer, between 0 to 100. The value to set the gauge meter to.
data-min Yes null Any integer. The minimum value of the gauge meter. Negative values show in combination with data-showvalue=true.
data-used Yes null Any positive integer. Display a percentage of a value that overrides any data-percent defined count. To show "25%" of 512 GB of RAM being used, you would specify "128" here and "512" for data-total.
data-total Yes null Any positive integer. Display a percentage of a value that overrides any data-percent defined count. To show "25%" of 512 GB of RAM being used, you would specify "512" here and "128" for data-used.
data-text Yes null Any short string. Replaces the data-percent count in the center of the gauge.
data-text_size Yes 0.22 Any positive float between 0.0 and 0.5. Scale factor for text size (indicated value or text in gauge center) in relation to gauge size.
data-prepend Yes null Any string (2 bytes max). Adds this text before the percent count in the center of the gauge.
data-append Yes null 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 Yes 100 Any positive integer. Width & height of the gauge meter in pixels.
data-width Yes 3 Any positive integer. Thickness of the gauge meter progress bar in pixels.
data-style Yes Full Full, Semi or Arch Displays either a full circle, semi-circle or an arched-circle.
data-color Yes #2C94E0 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. This value is overridden if data-theme is specified.
data-back Yes RGBa(0,0,0,.06) 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 Yes 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
 Color & gradient themes to fill the foreground-color of the gauge meter's progress bar with.
data-animate_gauge_colors Yes false Boolean, false or true. 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 Yes false Boolean, false or true. 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 Yes null Any short string. Supplemental text label that can appear below the central percentage or text of the gauge meter.
data-label_color Yes Black 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 Yes 0 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.
data-fill Yes null Hex values (#FFFFFF), Red-Green-Blue-Alpha color space (RGBa(255,255,255,1.0)) or HTML color-name (Blue) Fill color of internal gauge background area where prepend, append and gauge text is shown.
data-animationstep Yes 0 Any positive integer. Step width used for animation when gauge bargraph is drawn. Higher number results in higher animation speed. 0 stops animation.
data-showvalue Yes false Boolean, false or true. Label will show value instead of percent. Gauge bargraph will show 0-100% or computation of data-used and data-total.
See doc.html for more details.



Next: Best no code website buider tools

Supported Devices

Chrome, Firefox, Opera, MS Edge, IE10+, Wavebox

ADN

Tags

gauge meter, jquery plugins, free plugins, freebies, jquery chart plugin

also view other related posts,