Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


Labels Orientation:

This sample demonstrates how to specify radial gauge labels orientation. The possible options are: horizontal, radial and circular.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Labels Orientation 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 state = {
			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: 100,
					maximum: 1000,
					startAngle: 140,
					endAngle: 400,
					majorTickMarks: {
						length: 12,
						lineWidth: 2,
						interval: 100,
						offset: 0.80
					},
					minorTickMarks: {
						visible: true,
						length: 8,
						lineWidth: 2,
						interval: 20,
						offset: 0.80
					},
					labels: {
						orientation: 'circular',
						font: '12px sans-serif',
						interval: 100,
						offset: 1.00
					},
					needles: [
						{
							value: 650,
							type: 'pointer',
							outerOffset: 0.76,
							mediumOffset: 0.66,
							width: 10,
							fillStyle: '#252E32'
						}
					],
					ranges: [
						{
							outerOffset: 0.78,
							innerStartOffset: 0.72,
							innerEndOffset: 0.64,
							startValue: 300,
							endValue: 700,
							fillStyle: gradient1
						},
						{
							outerOffset: 0.78,
							innerStartOffset: 0.64,
							innerEndOffset: 0.56,
							startValue: 700,
							endValue: 1000,
							fillStyle: gradient2
						}
					]
				}
			]
		};

		var radialGauge = new DataViz.RadialGauge(state);
		radialGauge.write('container');

		function changeLabelsOrientation() {

			var labelsOrientation = document.getElementById('labelsOrientation').value;
			state.scales[0].labels.orientation = labelsOrientation;

			radialGauge.setState(state);
		}

	</script>

</head>
<body>
	<div>
		<div id="container" style="width: 350px; height: 350px;">
		</div>
		<br />
		Labels Orientation:
        <select onchange="changeLabelsOrientation()" id="labelsOrientation">
			<option selected="selected">circular</option>
			<option>radial</option>
			<option>horizontal</option>
		</select>
	</div>
</body>
</html>