Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to change the color of the text foreground. Please note that the textForegroundUnlit option is used for the unlit segments only, while textForeground is used for the lit segments of the display.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Text foreground unlit 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: 11,
                segmentMode: 'fourteenSegment',
                text: 'Hello World',
                textForeground: '#333333',
                textForegroundUnlit: '#DCDCDC'
            });
        });
    </script>

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