Analog/Digital Gauge Plugin - jQuery simplegauge.js

A simple-to-use jQuery plugin that uses SVG and JavaScript to draw customizable Analog Gauges or Digital Gauges on the page.

How to use it:

1. Import jQuery library and the simpleGauge plugin's files into the HTML document.

<link href="/path/to//jquery.simplegauge.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to//jquery.simplegauge.js"></script>

2. Create an empty DIV that will server as a container for the SVG gauge.

<div id="example"></div>

3. Initialize the plugin to render a basic gauge on the page.

$('#example').simpleGauge({
  value: 89.123456
});

4. Set the size of the gauge in the CSS.

#example {
  width: 16em;
  height: 16em;
}

5. Set the min/max values.

$('#example').simpleGauge({
  value: 89.123456,
  min: 0,
  max: 100,
});

6. Customize the appearance of the gauge.

$('#example').simpleGauge({

  // gauge type
  type: 'analog digital',

  // container styles
  container: {
    style: {},
    size: 90
  },

  // gauge title
  title: {
    text: '',
    style: {
      padding: '5px 7px',
      'font-size': '30px'
    }
  },

  // digital gauge options
  digital: {
    text: '{value.1}',
    style: {
      padding: '5px 7px',
      color: 'auto',
      'font-size': '25px',
      'font-family': '"Digital Dream Skew Narrow","Helvetica Neue",Helvetica,Arial,sans-serif',
      'text-shadow': '#999 2px 2px 4px'
    }
  },

  // analog gauge options
  analog: {
    numTicks: 10,
    minAngle: 150,
    maxAngle: 390,
    lineWidth: 10,
    arrowWidth: 10,
    arrowColor: '#486e85',
    inset: false
  },

  // bar colors
  barColors: [
    [ 0,  '#666' ],
    [ 50, '#ffa500' ],
    [ 90, '#e01010' ]
  ],
  
});

7. Default gauge template

$('#example').simpleGauge({

  template: [
    '<div class="simpleGauge_container">',
    '<div class="simpleGauge">',
    '<svg class="simpleGauge_bars simpleGauge_block" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>',
    '<div class="simpleGauge_marks simpleGauge_block"></div>',
    '<div class="simpleGauge_labels simpleGauge_block"></div>',
    '<div class="simpleGauge_digital"></div>',
    '<div class="simpleGauge_title"></div>',
    '</div>',
    '</div>'
  ].join(''),

});

8. Set & get values.

// get value
$('#example').simpleGauge('getValue');

// set value
$('#example').simpleGauge('setValue', 33);

Changelog:

v1.1.0 (2021-09-06)

• Add {value.1} etc to labels.text

v1.0.2 (2021-06-05)

• Input validation; 
• fix overflow issue; 
• better pointer shape;

2021-06-05

• Doc fixes; turn off debug messages

2021-06-04

• v1.0

2021-05-11

• Added methods

---

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