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 Linear 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 rangeGradient = {
			type: 'linearGradient',
			x0: 0.5,
			y0: 0,
			x1: 0.5,
			y1: 1,
			colorStops: [{ offset: 0, color: '#9DE100' },
						 { offset: 1, color: '#669200' }]
		};

		var needleGradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 0.5,
			x1: 1,
			y1: 0.5,
			colorStops: [{ offset: 0, color: '#4F6169' },
						 { offset: 1, color: '#252E32' }]
		};

		var linearGauge = new DataViz.LinearGauge({
			orientation: 'horizontal',
			background: '#F7F7F7',
			border: {
				padding: 10,
				lineWidth: 4,
				strokeStyle: '#76786A'
			},
			tooltips: {
				disabled: false,
				highlighting: true
			},
			animation: {
				duration: 1
			},
			scales: [
					 {
					 	minimum: 0,
					 	maximum: 100,
					 	labels: {
					 		offset: 0.16,
					 		intervalOffset: 30
					 	},
					 	majorTickMarks: {
					 		length: 10,
					 		offset: 0.28,
					 		lineWidth: 2,
					 		intervalOffset: 30
					 	},
					 	minorTickMarks: {
					 		length: 6,
					 		visible: true,
					 		interval: 2,
					 		offset: 0.34,
					 		lineWidth: 2,
					 		intervalOffset: 30
					 	},
					 	ranges: [
									{
										startValue: 0,
										endValue: 100,
										innerOffset: 0.46,
										outerStartOffset: 0.70,
										outerEndOffset: 0.90,
										fillStyle: rangeGradient
									}
					 	],
					 	needles: [

									{
										value: 70,
										fillStyle: needleGradient,
										innerOffset: 0.50,
										outerOffset: 0.95
									}
					 	]
					 }
			]
		});
		linearGauge.write('container');
	</script>

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