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 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: 'fourteenSegment',
                text: 'QWERTYUIOP',
                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>