Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to set the appearance of radial gauge labels.
The labels are formatted using sprintf.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Labels Example - HTML5 jQuery Radial 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.5,
			y0: 0,
			x1: 0.5,
			y1: 1,
			colorStops: [{ offset: 0, color: '#FF3366' },
						 { offset: 1, color: '#B2183E' }]
		};

		var anchorGradient = {
			type: 'radialGradient',
			x0: 0.35,
			y0: 0.35,
			r0: 0.0,
			x1: 0.35,
			y1: 0.35,
			r1: 1,
			colorStops: [{ offset: 0, color: '#4F6169' },
						 { offset: 1, color: '#252E32' }]
		};

		var radialGauge = new DataViz.RadialGauge({
			background: '#F7F7F7',
			border: {
				lineWidth: 6,
				strokeStyle: '#76786A',
				padding: 20
			},
			shadows: {
				enabled: true
			},
			anchor: {
				visible: true,
				fillStyle: anchorGradient,
				radius: 0.10
			},
			tooltips: {
				disabled: false,
				highlighting: true
			},
			animation: {
				duration: 1
			},
			scales: [
				{
					minimum: 0,
					maximum: 100,
					startAngle: 140,
					endAngle: 400,
					majorTickMarks: {
						length: 12,
						lineWidth: 2,
						interval: 10,
						offset: 0.80
					},
					minorTickMarks: {
						visible: true,
						length: 8,
						lineWidth: 2,
						interval: 2,
						offset: 0.80
					},
					labels: {
						orientation: 'horizontal',
						fillStyle: '#B2183E',
						stringFormat: '%d%%',
						font: '12px sans-serif',
						interval: 10,
						offset: 1.00
					},
					needles: [
						{
							value: 60,
							type: 'pointer',
							outerOffset: 0.76,
							mediumOffset: 0.66,
							width: 10,
							fillStyle: '#252E32'
						}
					],
					ranges: [
						{
							outerOffset: 0.78,
							innerStartOffset: 0.72,
							innerEndOffset: 0.64,
							startValue: 30,
							endValue: 70,
							fillStyle: gradient1
						},
						{
							outerOffset: 0.78,
							innerStartOffset: 0.64,
							innerEndOffset: 0.56,
							startValue: 70,
							endValue: 100,
							fillStyle: gradient2
						}
					]
				}
			]
		});
		radialGauge.write('container');
	</script>

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