Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify 14 segments digital display. This segment mode is used to display both letters and digits.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Fourteen 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: 'fourteenSegment',
			text: 'QWERTYUIOP',
			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>