Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to create digital clock using DataViz SegmentedDisplay.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Digital Clock 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 state = {
			background: '#DCDCDC',
			border: {
				padding: 10,
				lineWidth: 4,
				strokeStyle: '#76786A'
			},
			digits: 6,
			digitWidth: 0.72,
			segmentMode: 'sevenSegment',
			textForeground: '#333333',
			textForegroundUnlit: 'rgba(201, 201, 201, 0.5)',
			digitMargin: {
				left: 10
			}
		};
		var segmentedDisplay = new DataViz.SegmentedDisplay(state);
		segmentedDisplay.write('container');

		updateDisplay();

		function updateDisplay() {
			var currentTime = getValidTime();

			state.text = currentTime;
			segmentedDisplay.setState(state);

			setTimeout('updateDisplay()', 1000);
		}

		function getValidTime() {
			var currentTime = new Date();

			var hoursValue = currentTime.getHours();
			var minutesValue = currentTime.getMinutes();
			var secondsValue = currentTime.getSeconds();

			if (hoursValue > 12) {
				hoursValue -= 12;
			}

			if (hoursValue < 10) {
				hoursValue = '0' + hoursValue;
			}
			if (minutesValue < 10) {
				minutesValue = '0' + minutesValue;
			}
			if (secondsValue < 10) {
				secondsValue = '0' + secondsValue;
			}

			return hoursValue + ':' + minutesValue + ':' + secondsValue;
		}
	</script>

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