Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to customize the major and minor tick marks appearance.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Tick Marks 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 range1Gradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 0,
			x1: 0,
			y1: 1,
			colorStops: [{ offset: 0, color: '#61B603' },
						 { offset: 1, color: '#448100' }]
		};

		var range2Gradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 1,
			x1: 0,
			y1: 0,
			colorStops: [{ offset: 0, color: '#87B202' },
						 { offset: 1, color: '#A6DC01' }]
		};

		var comparativeMeasureGradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 0,
			x1: 1,
			y1: 0,
			colorStops: [{ offset: 0, color: '#E4E4E4' },
						 { offset: 0.552, color: '#FFFFFF' }]
		};

		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
				},
				majorTickMarks: {
					length: 14,
					edgeAlignment: 'inside',
					lineWidth: 4,
					strokeStyle: '#B2183E'
				},
				minorTickMarks: {
					visible: true,
					length: 6,
					edgeAlignment: 'inside',
					interval: 2,
					lineWidth: 2,
					strokeStyle: '#B2183E'
				},
				qualitativeRanges:
					[
						{
							value: 47,
							fillStyle: range1Gradient
						},
						{
							value: 70,
							fillStyle: range2Gradient
						}
					]
			},
			comparativeMeasures:
				[
					{
						value: 80,
						fillStyle: comparativeMeasureGradient
					}
				],
			featuredMeasures:
				[
					{
						value: 90,
						innerOffset: 0.4,
						outerOffset: 0.6,
						fillStyle: featuredMeasureGradient
					}
				]
		});
		bulletGraph.write('container');
	</script>

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