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 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: 10,
                segmentMode: 'sevenSegment',
                text: '0123456789',
                textForeground: '#333333',
                textForegroundUnlit: 'rgba(201, 201, 201, 0.5)'
            });
        });
    </script>

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