Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify bullet graph comparative measures.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Comparative 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 comparativeMeasureGradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 0,
			x1: 1,
			y1: 0,
			colorStops: [{ offset: 0, color: '#E4E4E4' },
						 { offset: 0.552, 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
				}
			},
			comparativeMeasures: [
				{
					value: 80,
					fillStyle: comparativeMeasureGradient
				},
				{
					value: 60
				},
				{
					value: 50,
					innerOffset: 0.2,
					outerOffset: 0.8,
					width: 8
				}
			]
		});
		bulletGraph.write('container');
	</script>

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