Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


Defines the positive, or negative, offset value from the start of the first interval. The interval offset can be applied to labels and the tick marks.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Interval Offset Example - HTML5 jQuery Bullet Graph 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 scaleBackgroundGradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 1,
                x1: 0,
                y1: 0,
                colorStops: [{ offset: 0, color: '#A4D020' },
                             { offset: 0.993, color: '#BFFE01' }]
            };

            var range1Gradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 1,
                colorStops: [{ offset: 0, color: '#61B603' },
                             { offset: 1, color: '#448100' }]
            };

            var range2Gradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 1,
                x1: 0,
                y1: 0,
                colorStops: [{ offset: 0, color: '#87B202' },
                             { offset: 1, color: '#A6DC01' }]
            };

            var comparativeMeasureGradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 1,
                y1: 0,
                colorStops: [{ offset: 0, color: '#E4E4E4' },
                             { offset: 0.552, color: '#FFFFFF' }]
            };

            var featuredMeasureGradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 1,
                colorStops: [{ offset: 0, color: '#BABABA' },
                             { offset: 0.495, color: '#FFFFFF' }]
            };


            $('#jqBulletGraph').jqBulletGraph({
                orientation: 'horizontal',
                border: {
                    lineWidth: 0
                },
                tooltips: {
                    disabled: false,
                    highlighting: false
                },
                animation: {
                    duration: 1
                },
                quantitativeScale: {
                    minimum: 0,
                    maximum: 100,
                    background: scaleBackgroundGradient,
                    labels: {
                        offset: 0.95,
                        intervalOffset: 30
                    },
                    majorTickMarks: {
                        intervalOffset: 30
                    },
                    qualitativeRanges:
                        [
                            {
                                value: 47,
                                fillStyle: range1Gradient
                            },
                            {
                                value: 70,
                                fillStyle: range2Gradient
                            }
                        ]
                },
                comparativeMeasures:
                    [
                        {
                            value: 80,
                            fillStyle: comparativeMeasureGradient
                        }
                    ],
                featuredMeasures:
                    [
                        {
                            value: 90,
                            innerOffset: 0.4,
                            outerOffset: 0.6,
                            fillStyle: featuredMeasureGradient
                        }
                    ]
            });
        });
    </script>

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