Creating Animated Gauges Using jQuery and Raphael.js - kumaGauge

kumaGauge is an easy jQuery plugin used to draw an animated & vector shaped semi-circular meter (Gauge) using Raphaël library.

See also:

• jQuery Plugin To Generate Animated Dynamic Gauges - dynameter
• jQuery Plugin To Generate Animated & Customizable Gauges - Flex Gauge
• jQuery Plugin For Creating SVG Gauges - Sonic Gauge
• Javascript Animated Gauges Plugin - JustGage

Basic Usage:

1. Include the needed jQuery library and the Raphaël library in your document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>

2. Include the jQuery kumaGauge plugin after jQuery library.

<script src="js/kuma-gauge.jquery.js"></script>

3. Create an empty DIV element in your document body.

<div class="js-gauge demo gauge"></div>

4. The JavaScript to generate a basic gauge into the DIV element.

$('.demo').kumaGauge({
  // dynamic value-update. just for sample.
  value : Math.floor((Math.random() * 99) + 1),
});

5. Available configurations.

// The radius of the arc
radius : 80, 

// The padding on the top and bottom of the gauge
paddingX : 40, 

// The padding on the left and right of the gauge
paddingY : 40,  

// The width of the gauge itseld
gaugeWidth : 30, 

// The fill of the gauge, this can be a solid color or a gradient
fill : '0-#1cb42f:0-#fdbe37:50-#fa4133:100', 

// The fill of the gauge background, this can be a solid color or a gradient
gaugeBackground : '#f4f4f4', 

// The fill of the canvas, this can be a solid color or a gradient
background : '#fff', 

// Show or hide the needle, 
// if true the value label shows half of the range
// if false the value label shows the value
showNeedle : true, 

// The speed of the animation in miliseconds
animationSpeed : 500, 

// The minimum value of the gauge
min : 0,

// The maximum value of the gauge
max : 100, 

// The actual value of the gauge
value : 80, 

// The label that indicates the value
valueLabel : {

  // show or hide this label
  display : true, 

  // The font family of this label
  fontFamily : 'Arial', 

  // The font color of this label
  fontColor : '#000', 

  // Integer of The font size of this label (without px)
  fontSize : 20, 

  // The font weight of this label
  fontWeight : 'normal' 
},

title : {

  // show or hide this label
  display : true, 

  // String the value of the title
  value : '', 

  // The font family of this label
  fontFamily : 'Arial', 

  // The font color of this label
  fontColor : '#000', 

  // Integer of The font size of this label (without px)
  fontSize : 20, 

   // The font weight of this label
  fontWeight : 'normal'
},
label : {

  // show or hide this label
  display : true, 

  // The value of the left (minimum) label
  left : 'Low', 

  // The value of the right (maximum) label
  right : 'High',

  // The font family of this label
  fontFamily : 'Arial', 

  // The font color of this label
  fontColor : '#000', 

  // Integer of The font size of this label (without px)
  fontSize : 12, 

  // The font weight of this label
  fontWeight : 'normal' 
}

---

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