jQuery Plugin For Creating SVG Gauges - Sonic Gauge

Sonic Gauge is a jQuery plugin that allows you to create and display SVG gauges based on Raphaël Vector Graphics JS Library. With this plugin, you can easily create speedometer, ammeter, altimeter, clock for your projects.

Basic Usage (Use speedometer as an example):

1. Include the latest jQuery library, Raphaël.js, and SonicGauge.js in your header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="jquery.sonic-gauge.js"></script>

2. Javascript

<script>
$(function (){

var Speedometer = $('#speedometer').SonicGauge ({
label: 'Speed (MPH)',
start: {angle: -225, num: -100},
end: {angle: 45, num: 100},
markers: [
{
gap: 20,
line: {"width": 20, "stroke": "none", "fill": "#eeeeee"},
text: {"space": 22, "text-anchor": "middle", "fill": "#333333", "font-size": 18}
},{
gap: 10, 
line: {"width": 12, "stroke": "none", "fill": "#aaaaaa"},
text: {"space": 18, "text-anchor": "middle", "fill": "#333333", "font-size": 12}
},{
gap: 5, 
line: {"width": 8, "stroke": "none", "fill": "#999999"}
}
],
animation_speed : 200
});

// Cycle gauge up and down

function cycleGauge (el, delay, increment, min, max, current, target) {

if (typeof current == "undefined")
{
current = min;
}

if (typeof target == "undefined")
{
target = max;
}

if (current < target)
{
current += increment;
}
else if (current > target)
{
current -= increment;
}
else
{
cycleGauge (el, delay, increment, min, max, current, target == min? max : min);
return;
}

el.SonicGauge ('val', current);
setTimeout (function () {
cycleGauge (el, delay, increment, min, max, current, target);
}, delay);

}

});
</script>

3. Markup

<div id='speedometer'></div>

---

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