Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify linear gauge elements order. Setting higher zIndex value to the visual element, moves it on top of the others.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Elements ZIndex 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 gradient1 = {
			type: 'linearGradient',
			x0: 0.5,
			y0: 0,
			x1: 0.5,
			y1: 1,
			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 gradient3 = {
			type: 'linearGradient',
			x0: 0.5,
			y0: 0,
			x1: 0.5,
			y1: 1,
			colorStops: [{ offset: 0, color: '#339CFF' },
						 { offset: 1, color: '#1F66A8' }]
		};

		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
					 	},
					 	majorTickMarks: {
					 		length: 10,
					 		offset: 0.28,
					 		lineWidth: 2
					 	},
					 	minorTickMarks: {
					 		length: 6,
					 		visible: true,
					 		interval: 2,
					 		offset: 0.32,
					 		lineWidth: 2
					 	},
					 	ranges: [
									{
										startValue: 0,
										endValue: 40,
										innerOffset: 0.46,
										outerStartOffset: 0.64,
										outerEndOffset: 0.75,
										fillStyle: gradient1,
										zIndex: 3
									},
									{
										startValue: 40,
										endValue: 70,
										innerOffset: 0.46,
										outerStartOffset: 0.75,
										outerEndOffset: 0.84,
										fillStyle: gradient2,
										zIndex: 3
									},
									{
										startValue: 70,
										endValue: 100,
										innerOffset: 0.46,
										outerStartOffset: 0.84,
										outerEndOffset: 0.90,
										fillStyle: gradient3,
										zIndex: 3
									}
					 	],
					 	needles: [
								   {
								   	type: 'pointer',
								   	value: 80,
								   	fillStyle: needleGradient,
								   	innerOffset: 0.25,
								   	outerOffset: 1.00,
								   	zIndex: 2
								   }
					 	]
					 }
			]
		});


		linearGauge.addEventListener('tooltipFormat', function (e, data) {

			var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '<br />';

			switch (data.elementType) {

				case 'needle':
					tooltip += 'Value: ' + data.value;
					break;
				case 'range':
					tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue;
			}

			e.result = tooltip;
		});
		linearGauge.write('container');
	</script>

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