Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify radial gauge needles.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Needles 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 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: 8,
				strokeStyle: '#76786A',
				padding: 10
			},
			anchor: {
				visible: true,
				fillStyle: anchorGradient
			},
			animation: {
				duration: 1
			},
			scales: [
				{
					minimum: 0,
					maximum: 12,
					interval: 1,
					startAngle: 270,
					endAngle: 630,
					labels: {
						offset: 0.85,
						showFirstLabel: false,
						font: '14px sans-serif'
					},
					minorTickMarks: {
						visible: true,
						interval: 0.2,
						offset: 0.98
					},
					majorTickMarks: {
						lineWidth: 3,
						offset: 0.97
					},
					needles: [
						{
							type: 'pointer',
							title: 'Pointer',
							value: 1,
							outerOffset: 0.5,
							mediumOffset: 0.4,
							width: 12,
							fillStyle: '#252E32'
						},
						{
							type: 'triangle',
							title: 'Triangle',
							value: 6,
							outerOffset: 0.75,
							width: 15,
							fillStyle: '#252E32'
						},
						{
							type: 'line',
							title: 'Line',
							value: 10,
							outerOffset: 0.75,
							innerOffset: -0.2,
							lineWidth: 3,
							fillStyle: '#252E32'
						},
						{
							type: 'rectangle',
							title: 'Rectangle',
							value: 8,
							outerOffset: 0.75,
							innerOffset: -0.2,
							width: 8,
							fillStyle: '#252E32'
						}
					]
				}
			]
		});
		radialGauge.write('container');
	</script>

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