Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify linear gauge bar markers.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Bar Markers 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,
			y0: 0.5,
			x1: 1,
			y1: 0.5,
			colorStops: [{ offset: 0, color: '#C5F80B' },
						 { offset: 1, color: '#6B8901' }]
		};

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

		var gradient3 = {
			type: 'linearGradient',
			x0: 0,
			y0: 0.5,
			x1: 1,
			y1: 0.5,
			colorStops: [{ offset: 0, color: '#339CFF' },
						 { offset: 1, color: '#1F66A8' }]
		};

		var linearGauge = new DataViz.LinearGauge({
			orientation: 'vertical',
			background: '#F7F7F7',
			border: {
				lineWidth: 4,
				strokeStyle: '#76786A',
				padding: 8
			},
			scales: [
				{
					minimum: 0,
					maximum: 100,
					interval: 10,
					labels: {
						offset: 0.14,
						hAlign: 'right'
					},
					majorTickMarks: {
						offset: 0.21,
						lineWidth: 2
					},
					minorTickMarks: {
						visible: true,
						offset: 0.26,
						interval: 2,
						lineWidth: 2
					},
					barMarkers: [
						{
							title: 'Measure1',
							value: 80,
							fillStyle: gradient1,
							innerOffset: 0.40,
							outerOffset: 0.56
						},
						{
							title: 'Measure2',
							value: 70,
							fillStyle: gradient2,
							innerOffset: 0.60,
							outerOffset: 0.76
						},
						{
							title: 'Measure3',
							value: 90,
							fillStyle: gradient3,
							innerOffset: 0.80,
							outerOffset: 0.96
						}
					]
				}
			]
		});
		linearGauge.write('container');
	</script>

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