jquery-d3-arc-gauge

jQuery D3 Arc Gauge is a jQuery plugin that makes use of the D3.js library to create a simple radial (or angular) gauge.

Demo

See demos here.

Example

<div id="arc-gauge" data-height="180" data-value="50"></div>

$('#arc-gauge').arcGauge();

Options

You can set any option by passing it to the constructor:

$('#arc-gauge').arcGauge({
  class:    'temperature-gauge'
  minValue: -20,
  maxValue:  50,
  value:     20
});

Option	Type	Default	Description
class	String	arc-gauge	The class assigned to SVG element.
width	Integer	container-width	With of the gauge.
height	Integer	container-height	Height of the gauge.
startAngle	Integer	-120	Degrees of starting angle (clockwise usage from North).
endAngle	Integer	+120	Degrees of ending angle (clockwise usage from North).
thickness	Integer	5	Thickness of the gauge.
value	Float	0	Initial value.
minValue	Float	0	Minimum reachable value (corresponding to the starAngle).
maxValue	Float	100	Maximum reachable value (corresponding to the endAngle).
transition	Integer	1000	Amount of milliseconds of every transition.
bgColor	String	#eee	Color of the fixed arc in the background.
colors	String or object	#08c	Color of the foreground arc. You can set a fixed color by using a string like #99cccc, or you can set multiple colors depeding on the value of the gauge by using an object like this: colors: { 0: '#003366', // 0% 0.25: '#33cc00', // 25% 0.5: '#ffff66', // 50% 0.75: '#ff9966', // 75% 0.9: '#ff3333' // 90% } Every property of that object defines the color matched by the gauge in any specific percentual value.
onchange	Function	function(value){}	A callback function fired every time the gauge changes his value.

data-attributes support

You can set the option of the gauge simply by adding a data attribute in your HTML code.

<div id="arc-gauge"
  data-height="180"
  data-value="1"
  data-max-value="60"
  data-thickness="8"
  data-start-angle="0"
  data-end-angle="360"></div>

Methods

To call a method you have first to fetch the single instance. Any method is attached to the container directly (pure javascript):

alert('Current value: ' + $('#arg-gauge')[0].get() );

Name	Description
get()	Get the current value of the gauge.
set(value)	Set a value of the gauge. The first parameter defines the value.