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() );