Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify seven segmented digital display. The seven segment mode is used to display digits.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Seven Segmented Display Example - HTML5 jQuery Segmented Display 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 segmentedDisplay = new DataViz.SegmentedDisplay({
			background: '#DCDCDC',
			border: {
				padding: 10,
				lineWidth: 4,
				strokeStyle: '#76786A'
			},
			digits: 10,
			segmentMode: 'sevenSegment',
			text: '0123456789',
			textForeground: '#333333',
			textForegroundUnlit: 'rgba(201, 201, 201, 0.5)'
		});
		segmentedDisplay.write('container');
	</script>

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