GaugeMeter.js Features

Requirements

Download Library

This jQuery GaugeMeter Plugin can be downloaded here.

Original demo was here: http://ashalom.github.io/GaugeMeter

Original repo was here: https://github.com/AshAlom/GaugeMeter

Implementation

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

jQuery & JavaScript Code

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

CSS Styles

<style>
  .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;
  }
</style>

HTML Code

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

<div class="GaugeMeter" id="GaugeMeter_1"></div>

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

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

Update the gauge value and its indication via jQuery.

$("#GaugeMeter_1").gaugeMeter({percent:15});

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-min="0"
    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 = 1
    data-animate_gauge_colors=true
    data-animate_text_colors=true
    data-label="VISA Card"
    data-label_color="#FF0000"
    data-text="Spendings"
    data-text_size="0.22"
    data-fill="#FFFFFF"
    data-showvalue=false
></div>

Parameter Definitions

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 or as object properties when calling the library. The following table elaborates upon each of the parameter properties.

Examples

A few samples to show off the capabilities of this plugin.

data-percent:              "10"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               null
data-size:                 null
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "30"
data-text:                 null
data-text_size:            0.22
data-prepend:              "$"
data-append:               null
data-size:                 null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "40"
data-text:                 "Hello"
data-text_size:            0.22
data-prepend:              null
data-append:               null
data-size:                 null
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "65"
data-text:                 "World"
data-text_size:            0.10
data-prepend:              null
data-append:               null
data-size:                 null
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "50"
data-text:                 null
data-text_size:            0.22
data-prepend:              "%"
data-append:               null
data-size:                 "50"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "60"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "64"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "70"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "128"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "80"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                "20"
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkRed-LightRed"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               "2"
        

data-percent:              "88"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "200"
data-width:                "1"
data-style:                null
data-color:                null
data-back:                 "RGBa(255,255,255,0)"
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "77"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "256"
data-width:                "20"
data-style:                null
data-color:                "#2C94E0"
data-back:                 "#FF9EE0"
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              0
data-min:                  -100
data-total:                100
data-used:                 -50
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                "15"
data-style:                "Arch"
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
data-showvalue:            true
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                "15"
data-style:                "Semi"
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                "15"
data-style:                "Arch"
data-color:                null
data-back:                 null
data-theme:                "Red-Gold-Green"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Green-Gold-Red"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Green-Red"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Red-Green"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkBlue-LightBlue"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "LightBlue-DarkBlue"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkRed-LightRed"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "LightRed-DarkRed"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkGreen-LightGreen"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "LightGreen-DarkGreen"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkGold-LightGold"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "LightGold-DarkGold"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Red-Gold-Green"
data-animate_gauge_colors: true
data-animate_text_colors:  false
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Red-Gold-Green"
data-animate_gauge_colors: true
data-animate_text_colors:  true
data-label:                null
data-label_color:          null
data-stripe:               null
        

data-percent:              "20" - "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 null
data-width:                "2"
data-style:                null
data-color:                null
data-back:                 "RGBa(255,255,255,.2)"
data-theme:                "White"
data-animate_gauge_colors: false
data-animate_text_colors:  true
data-label:                null
data-label_color:          "#FFF"
data-stripe:               null
        

data-percent:              "47" / "76" / "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "180"
data-width:                "7"
data-style:                null / "Arch" / "Semi"
data-color:                null
data-back:                 null
data-theme:                "Black"
data-animate_gauge_colors: true
data-animate_text_colors:  true
data-label:                Battery / WiFi / Upload
data-label_color:          "#FF0000"
data-stripe:               null
        

data-percent:              "47" / "76" / "100"
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               "%"
data-size:                 "180"
data-width:                "7"
data-style:                null / "Arch" / "Semi"
data-color:                null
data-back:                 null
data-theme:                "Black"
data-animate_gauge_colors: true
data-animate_text_colors:  true
data-label:                Battery / WiFi / Upload
data-label_color:          "#FF0000"
data-stripe:               null
data-fill:                 "#21B4F9"
        

data-percent:              0
data-total:                256
data-used:                 128
data-text:                 null
data-text_size:            0.22
data-prepend:              null
data-append:               null
data-size:                 "180"
data-width:                "7"
data-style:                "Arch"
data-color:                null
data-back:                 null
data-theme:                "Black"
data-animate_gauge_colors: false
data-animate_text_colors:  false
data-label:                "128 of 256"
data-label_color:          "#FF0000"
data-stripe:               null
data-fill:                 null
data-showvalue:            true
        

Fork me on GitHub