Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display




This sample demonstrates how to change a spcific gauge options.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Gauge Options Example - HTML5 jQuery Linear 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 rangeGradient = {
			type: 'linearGradient',
			x0: 0.5,
			y0: 0,
			x1: 0.5,
			y1: 1,
			colorStops: [{ offset: 0, color: '#9DE100' },
						 { offset: 1, color: '#669200' }]
		};

		var needleGradient = {
			type: 'linearGradient',
			x0: 0,
			y0: 0.5,
			x1: 1,
			y1: 0.5,
			colorStops: [{ offset: 0, color: '#4F6169' },
						 { offset: 1, color: '#252E32' }]
		};

		var state = {
			orientation: 'horizontal',
			background: '#F7F7F7',
			border: {
				padding: 10,
				lineWidth: 4,
				strokeStyle: '#76786A'
			},
			tooltips: {
				disabled: false,
				highlighting: true
			},
			scales: [
				{
					minimum: 0,
					maximum: 100,
					labels: {
						offset: 0.16
					},
					majorTickMarks: {
						length: 10,
						offset: 0.28,
						lineWidth: 2
					},
					minorTickMarks: {
						length: 6,
						visible: true,
						interval: 2,
						offset: 0.34,
						lineWidth: 2
					},
					ranges: [
						{
							startValue: 0,
							endValue: 100,
							innerOffset: 0.46,
							outerStartOffset: 0.70,
							outerEndOffset: 0.90,
							fillStyle: rangeGradient
						}
					],
					needles: [
						{
							type: 'pointer',
							value: 40,
							fillStyle: needleGradient,
							innerOffset: 0.50,
							outerOffset: 0.95
						}
					]
				}
			]
		};

		var linearGauge = new DataViz.LinearGauge(state);

		function changeBackground() {
			state.background = '#FF3366';
			linearGauge.setState(state);
		}

		function changeValue() {
			state.scales[0].needles[0].value = Math.random() * 100;
			linearGauge.setState(state);
		}

		linearGauge.write('container');
	</script>

</head>
<body>
	<div id="container" style="width: 400px; height: 100px;">
	</div>
	<br />
	<input id="buttonBackground" onclick="changeBackground()" type="button" value="Change Background" />
	<input id="buttonRandomValue" onclick="changeValue()" type="button" value="Change needle value" />
	<br />
</body>
</html>