Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


Defines the positive, or negative, offset value from the start of the first interval. The interval offset can be applied to labels and the tick marks.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Interval Offset Example - HTML5 jQuery Radial Gauge JavaScript Plugin
</title>
	<link rel="stylesheet" type="text/css" href="../../css/dataviz.gauges.css" />
	<script src="../../js/dataviz.gauges.min.js" type="text/javascript"></script>
	
	<script lang="javascript" type="text/javascript">
		var gradient1 = {
			type: 'linearGradient',
			x0: 0,
			y0: 0.5,
			x1: 1,
			y1: 0.5,
			colorStops: [{ offset: 0, color: '#C5F80B' },
						 { offset: 1, color: '#6B8901' }]
		};

		var gradient2 = {
			type: 'linearGradient',
			x0: 0.5,
			y0: 0,
			x1: 0.5,
			y1: 1,
			colorStops: [{ offset: 0, color: '#FF3366' },
						 { offset: 1, color: '#B2183E' }]
		};

		var anchorGradient = {
			type: 'radialGradient',
			x0: 0.35,
			y0: 0.35,
			r0: 0.0,
			x1: 0.35,
			y1: 0.35,
			r1: 1,
			colorStops: [{ offset: 0, color: '#4F6169' },
						 { offset: 1, color: '#252E32' }]
		};

		var radialGauge = new DataViz.RadialGauge({
			background: '#F7F7F7',
			border: {
				lineWidth: 6,
				strokeStyle: '#76786A',
				padding: 16
			},
			shadows: {
				enabled: true
			},
			anchor: {
				visible: true,
				fillStyle: anchorGradient,
				radius: 0.10
			},
			tooltips: {
				disabled: false,
				highlighting: true
			},
			animation: {
				duration: 1
			},
			scales: [
				{
					minimum: 0,
					maximum: 150,
					startAngle: 140,
					endAngle: 400,
					majorTickMarks: {
						length: 12,
						lineWidth: 2,
						interval: 10,
						intervalOffset: 30,
						offset: 0.84
					},
					minorTickMarks: {
						visible: true,
						length: 8,
						lineWidth: 2,
						interval: 2,
						intervalOffset: 30,
						offset: 0.84
					},
					labels: {
						orientation: 'horizontal',
						interval: 10,
						intervalOffset: 30,
						offset: 1.00
					},
					needles: [
						{
							value: 100,
							type: 'pointer',
							outerOffset: 0.8,
							mediumOffset: 0.7,
							width: 10,
							fillStyle: '#252E32'
						}
					],
					ranges: [
						{
							outerOffset: 0.82,
							innerStartOffset: 0.76,
							innerEndOffset: 0.68,
							startValue: 0,
							endValue: 110,
							fillStyle: gradient1
						},
						{
							outerOffset: 0.82,
							innerStartOffset: 0.68,
							innerEndOffset: 0.60,
							startValue: 110,
							endValue: 150,
							fillStyle: gradient2
						}
					]
				}
			]
		});
		radialGauge.write('container');
	</script>

</head>
<body>
	<div>
		<div id="container" style="width: 350px; height: 350px;">
		</div>
	</div>
</body>
</html>