Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify the linear gauge elements highlighting appearance.

For detailed implementation, please take a look at the HTML code tab.
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Highlighting Example - HTML5 jQuery Linear Gauge 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 () {
            var gradient1 = {
                type: 'linearGradient',
                x0: 0.5,
                y0: 0,
                x1: 0.5,
                y1: 1,
                colorStops: [{ offset: 0, color: '#C5F80B' },
                             { offset: 1, color: '#6B8901'}]
            };

            var gradient2 = {
                type: 'linearGradient',
                x0: 0.5,
                y0: 0,
                x1: 0.5,
                y1: 1,
                colorStops: [{ offset: 0, color: '#FF3366' },
                             { offset: 1, color: '#B2183E'}]
            };

            var gradient3 = {
                type: 'linearGradient',
                x0: 0.5,
                y0: 0,
                x1: 0.5,
                y1: 1,
                colorStops: [{ offset: 0, color: '#339CFF' },
                             { offset: 1, color: '#1F66A8'}]
            };

            var needleGradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 0.5,
                x1: 1,
                y1: 0.5,
                colorStops: [{ offset: 0, color: '#4F6169' },
                             { offset: 1, color: '#252E32'}]
            };


            $('#jqLinearGauge').jqLinearGauge({
                orientation: 'horizontal',
                background: '#F7F7F7',
                border: {
                    padding: 10,
                    lineWidth: 4,
                    strokeStyle: '#76786A'
                },
                tooltips: {
                    disabled: true,
                    highlighting: true,
                    highlightingFillStyle: 'rgba(0, 204, 0, 0.5)',
                    highlightingStrokeStyle: 'black'
                },
                animation: {
                    duration: 1
                },
                scales: [
                         {
                             minimum: 0,
                             maximum: 100,
                             labels: {
                                 offset: 0.16
                             },
                             majorTickMarks: {
                                 length: 10,
                                 offset: 0.28,
                                 lineWidth: 2
                             },
                             minorTickMarks: {
                                 length: 6,
                                 visible: true,
                                 interval: 2,
                                 offset: 0.34,
                                 lineWidth: 2
                             },
                             ranges: [
                                         {
                                             startValue: 0,
                                             endValue: 40,
                                             innerOffset: 0.46,
                                             outerStartOffset: 0.64,
                                             outerEndOffset: 0.75,
                                             fillStyle: gradient1
                                         },
                                         {
                                             startValue: 40,
                                             endValue: 70,
                                             innerOffset: 0.46,
                                             outerStartOffset: 0.75,
                                             outerEndOffset: 0.84,
                                             fillStyle: gradient2
                                         },
                                         {
                                             startValue: 70,
                                             endValue: 100,
                                             innerOffset: 0.46,
                                             outerStartOffset: 0.84,
                                             outerEndOffset: 0.90,
                                             fillStyle: gradient3
                                         }
                                     ],
                             needles: [
                                        {
                                            type: 'pointer',
                                            value: 80,
                                            fillStyle: needleGradient,
                                            innerOffset: 0.50,
                                            outerOffset: 1.00
                                        }
                                      ]
                         }
                        ]
            });
        });
    </script>

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