Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify linear gradients.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Linear Gradients 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 fillStyle1 = {
			type: 'linearGradient',
			x0: 0,
			y0: 0,
			x1: 1,
			y1: 0,
			colorStops: [{ offset: 0, color: '#65c2e8' },
						 { offset: 0.49, color: '#55b3e1' },
						 { offset: 0.5, color: '#3ba6dc' },
						 { offset: 1, color: '#2794d4' }]
		};

		var fillStyle2 = {
			type: 'linearGradient',
			x0: 0,
			y0: 0,
			x1: 1,
			y1: 0,
			colorStops: [{ offset: 0, color: '#eea151' },
						 { offset: 0.49, color: '#ea8f44' },
						 { offset: 0.5, color: '#e67e28' },
						 { offset: 1, color: '#e06818' }]
		};


		var linearGauge = new DataViz.LinearGauge({
			orientation: 'vertical',
			background: '#F7F7F7',
			border: {
				lineWidth: 4,
				strokeStyle: '#76786A',
				padding: 8
			},
			animation: {
				duration: 1
			},
			scales: [
					 {
					 	minimum: 0,
					 	maximum: 100,
					 	interval: 10,
					 	labels: {
					 		offset: 0.14,
					 		hAlign: 'right'
					 	},
					 	majorTickMarks: {
					 		offset: 0.18,
					 		lineWidth: 2
					 	},
					 	minorTickMarks: {
					 		visible: true,
					 		offset: 0.24,
					 		interval: 2,
					 		lineWidth: 2
					 	},
					 	barMarkers: [
									   {
									   	value: 70,
									   	fillStyle: fillStyle1,
									   	innerOffset: 0.4,
									   	outerOffset: 0.65
									   },
									   {
									   	value: 90,
									   	fillStyle: fillStyle2,
									   	innerOffset: 0.7,
									   	outerOffset: 0.95
									   }
					 	]
					 }
			]
		});
		linearGauge.write('container');
	</script>

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