Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify segment interval for the segmented displays. The segmentInterval option specifies the distance between segments in the digit.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Segment Interval 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',
                segmentInterval: 5,
                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>