Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify multiple linear gauge scales.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Multiple Scales 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 linearGradientRange = {
			type: 'linearGradient',
			x0: 0,
			y0: 0,
			x1: 0,
			y1: 1,
			colorStops: [{ offset: 0, color: '#FE642E' },
                         { offset: 1, color: '#FFFF00' }]
		};

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

		var radialGradient = {
			type: 'radialGradient',
			x0: 0.45,
			y0: 0.45,
			r0: 0.0,
			x1: 0.45,
			y1: 0.45,
			r1: 1,
			colorStops: [{ offset: 0, color: '#FF3366' },
                         { offset: 1, color: '#B2183E' }]
		};


		var linearGauge = new DataViz.LinearGauge({
			orientation: 'vertical',
			background: '#F7F7F7',
			border: {
				padding: 10,
				lineWidth: 4,
				strokeStyle: '#76786A'
			},
			tooltips: {
				disabled: true,
				highlighting: false
			},
			scales: [
					 {
					 	margin: {
					 		top: 6,
					 		left: 0,
					 		right: 0,
					 		bottom: 26
					 	},
					 	minimum: -30,
					 	maximum: 50,
					 	interval: 10,
					 	labels: {
					 		offset: 0.20,
					 		font: '14px sans-serif',
					 		hAlign: 'right'
					 	},
					 	majorTickMarks: {
					 		offset: 0.25,
					 		length: 15,
					 		interval: 5
					 	},
					 	minorTickMarks: {
					 		visible: true,
					 		interval: 1,
					 		offset: 0.31
					 	},
					 	ranges: [
								 {
								 	startValue: -30,
								 	endValue: 50,
								 	fillStyle: 'black',
								 	innerOffset: 0.38,
								 	outerStartOffset: 0.39,
								 	outerEndOffset: 0.39
								 }
					 	],
					 	barMarkers: [
									   {
									   	value: 18,
									   	innerOffset: 0.39,
									   	outerOffset: 0.58,
									   	fillStyle: linearGradientBarMarker,
									   	zIndex: 5
									   }
					 	],
					 	needles: [
								  {
								  	type: 'ellipse',
								  	fillStyle: radialGradient,
								  	lineWidth: 1,
								  	strokeStyle: 'black',
								  	value: -33,
								  	width: 34,
								  	height: 34,
								  	innerOffset: 0.335
								  }
					 	]
					 },
					 {
					 	minimum: -22,
					 	maximum: 122,
					 	interval: 20,
					 	margin: {
					 		top: 6,
					 		left: 0,
					 		right: 0,
					 		bottom: 26
					 	},
					 	labels: {
					 		offset: 0.78,
					 		font: '14px sans-serif',
					 		hAlign: 'left'
					 	},
					 	majorTickMarks: {
					 		offset: 0.60,
					 		length: 15,
					 		interval: 10
					 	},
					 	minorTickMarks: {
					 		visible: true,
					 		interval: 2,
					 		offset: 0.60
					 	},
					 	ranges:
							   [
								   {
								   	startValue: -22,
								   	endValue: 122,
								   	fillStyle: 'black',
								   	innerOffset: 0.58,
								   	outerStartOffset: 0.59,
								   	outerEndOffset: 0.59
								   }
							   ]
					 }
			]
		});
		linearGauge.write('container');
	</script>

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