Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify bullet graph featured measures.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Featured Measures 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 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
				}
			},
			featuredMeasures:
				[
					{
						value: 80,
						fillStyle: featuredMeasureGradient,
						innerOffset: 0.4,
						outerOffset: 0.6
					}
				]
		});
		bulletGraph.write('container');
	</script>

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