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 Bullet Graph 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 scaleBackgroundGradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 1,
			x1: 0,
			y1: 0,
			colorStops: [{ offset: 0, color: '#A4D020' },
						 { offset: 0.993, color: '#BFFE01' }]
		};

		var range1Gradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 0,
			x1: 0,
			y1: 1,
			colorStops: [{ offset: 0, color: '#61B603' },
						 { offset: 1, color: '#448100' }]
		};

		var range2Gradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 1,
			x1: 0,
			y1: 0,
			colorStops: [{ offset: 0, color: '#87B202' },
						 { offset: 1, color: '#A6DC01' }]
		};

		var comparativeMeasureGradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 0,
			x1: 1,
			y1: 0,
			colorStops: [{ offset: 0, color: '#E4E4E4' },
						 { offset: 0.552, color: '#FFFFFF' }]
		};

		var featuredMeasureGradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 0,
			x1: 0,
			y1: 1,
			colorStops: [{ offset: 0, color: '#BABABA' },
						 { offset: 0.495, color: '#FFFFFF' }]
		};


		var bulletGraph = new DataViz.BulletGraph({
			orientation: 'horizontal',
			border: {
				lineWidth: 0
			},
			tooltips: {
				disabled: false,
				highlighting: false
			},
			animation: {
				duration: 1
			},
			quantitativeScale: {
				minimum: 0,
				maximum: 100,
				background: scaleBackgroundGradient,
				labels: {
					offset: 0.95,
					intervalOffset: 30
				},
				majorTickMarks: {
					intervalOffset: 30
				},
				qualitativeRanges:
					[
						{
							value: 47,
							fillStyle: range1Gradient
						},
						{
							value: 70,
							fillStyle: range2Gradient
						}
					]
			},
			comparativeMeasures:
				[
					{
						value: 80,
						fillStyle: comparativeMeasureGradient
					}
				],
			featuredMeasures:
				[
					{
						value: 90,
						innerOffset: 0.4,
						outerOffset: 0.6,
						fillStyle: featuredMeasureGradient
					}
				]
		});
		bulletGraph.write('container');
	</script>

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