Analog/Digital Gauge Plugin Examples

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

Example 1: Simple gauge, using mostly defaults

Demo Gauge 1		HTML, JavaScript, Style
		<div id="demoGauge1"></div> <script> $(document).ready(function() { $('#demoGauge1').simpleGauge({ value: 75.123456 }); }); </script> <style> #demoGauge1 { width: 16em; height: 16em; } </style>

Demo Gauge 2		HTML, JavaScript, Style
		<div id="demoGauge2"></div> <script> $(document).ready(function() { $('#demoGauge2').simpleGauge({ container: { style: 'background-color: #eee; border-radius: 1000px; border: 4px solid #bbb;', size: 87 }, title: { text: 'k RPM', style: 'color: gray; font-size: 40px; padding: 0px;' }, digital: { text: '{value.3}', style: 'color: auto; font-size: 30px;' }, analog: { numTicks: 12, minAngle: 180, maxAngle: 360, lineWidth: 10, arrowWidth: 20, arrowColor: '#ccc', inset: false, }, barColors: [ [0, '#666'], [1.0, '#378618'], [4.5, '#ffa500'], [5.5, '#f00'] ], min: 0, max: 6, value: 3.6234567 }); }); </script> <style> #demoGauge2 { width: 20em; height: 20em; } </style>