Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to create digital clock using jqSegmentedDisplay.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Digital Clock Example - HTML5 jQuery Segmented Display Plugin by jqChart
</title>
	<link rel="stylesheet" type="text/css" href="../../css/jquery.jqGauges.css" />
	<script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="../../js/jquery.jqGauges.min.js" type="text/javascript"></script>
	
    <script lang="javascript" type="text/javascript">
        $(document).ready(function () {

            $('#jqSegmentedDisplay').jqSegmentedDisplay({
                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
                }
            });

            updateDisplay();

        });

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

            $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'text', currentTime.toString());

            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="jqSegmentedDisplay" style="width: 400px; height: 100px;">
        </div>
    </div>
</body>
</html>