Simple jQuery Plugin For Creating SVG Based Gauges

A lightweight (~5kb minified) jQuery plugin which allows you to draw a simple customizable gauge using SVG element.

How to use it:

1. Load the jquery-gauge.css in the header for basic gauge styles.

<link href="jquery-gauge.css" rel="stylesheet">

2. Load the jquery-gauge.min.js after jQuery JavaScript library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery-gauge.min.js"></script>

3. Create an element that will serve as the container for the gauge.

<div class="gauge"></div>

4. Render a customizable gauage inside the container element you just created.

$('.gauge').gauge({
  values: {
    0 : '0',
    20: '2',
    40: '4',
    60: '6',
    80: '8',
    100: '10'
  },
  colors: {
    0 : '#666',
    60: '#ffa500',
    80: '#f00'
  },
  angles: [
    180,
    360
  ],
  lineWidth: 10,
  arrowWidth: 20,
  arrowColor: '#ccc',
  inset:true,

  value: 30
});

Change log:

2016-10-05

• cross-browser fix for SVG transform-origin arrow position

2015-08-26

• percents sorting fixes

 

---

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