Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display



This sample demonstrates how to change specific display options. With .jqSegmentedGauge("option", optionName, [value]) method you can get or set any jqSegmentedGauge option. If no value is specified, will act as a getter.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Change Options 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: 9,
                segmentMode: 'fourteenSegment',
                text: 'Some Info',
                textForeground: '#333333',
                textForegroundUnlit: 'rgba(201, 201, 201, 0.5)'
            });

            $('#buttonTextForeground').click(function () {
                var textForeground = $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'textForeground');

                if (textForeground === '#333333') {
                    $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'textForeground', '#6ba851');
                }
            });

            $('#buttonChangeText').click(function () {
                // The new text will be 2 digits longer than the text before, so we set the digits option to 11.
                $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'digits', 11);

                $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'text', 'Hello World');
            });

        });
    </script>

</head>
<body>
    <div>
        <div id="jqSegmentedDisplay" style="width: 500px; height: 100px;">
        </div>
        <br />
        <input id="buttonChangeText" type="button" value="Change text" />
        <input id="buttonTextForeground" type="button" value="Change text foreground" />
    </div>
</body>
</html>