Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display




This sample demonstrates how to change a specific bullet graph options.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Change Options 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 state = {
			orientation: 'horizontal',
			border: {
				lineWidth: 0
			},
			tooltips: {
				disabled: false,
				highlighting: false
			},
			quantitativeScale: {
				name: 'Main Scale',
				minimum: 0,
				maximum: 100,
				background: scaleBackgroundGradient,
				labels: {
					offset: 0.95
				},
				qualitativeRanges: [
					{
						value: 47,
						fillStyle: range1Gradient
					},
					{
						value: 70,
						fillStyle: range2Gradient
					}
				]
			},
			comparativeMeasures: [
				{
					title: 'Comparative Measure',
					value: 80,
					fillStyle: comparativeMeasureGradient
				}
			],
			featuredMeasures: [
				{
					title: 'Featured Measure',
					value: 90,
					innerOffset: 0.4,
					outerOffset: 0.6,
					fillStyle: featuredMeasureGradient
				}
			]
		};

		var bulletGraph = new DataViz.BulletGraph(state);

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

		function changeValue() {
			state.featuredMeasures[0].value = Math.random() * 100;
			bulletGraph.setState(state);
		}

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

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