Analog/Digital Gauge Plugin - jQuery simplegauge.js
File Size: | 18.9 KB |
---|---|
Views Total: | 3013 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.