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 Radial 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, y0: 0.5, x1: 1, y1: 0.5, 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 anchorGradient = { type: 'radialGradient', x0: 0.35, y0: 0.35, r0: 0.0, x1: 0.35, y1: 0.35, r1: 1, colorStops: [{ offset: 0, color: '#4F6169' }, { offset: 1, color: '#252E32'}] }; $('#jqRadialGauge').jqRadialGauge({ background: '#F7F7F7', border: { lineWidth: 6, strokeStyle: '#76786A', padding: 16 }, shadows: { enabled: true }, anchor: { visible: true, fillStyle: anchorGradient, radius: 0.10 }, tooltips: { disabled: false, highlighting: true }, animation: { duration: 1 }, scales: [ { minimum: 0, maximum: 150, startAngle: 140, endAngle: 400, majorTickMarks: { length: 12, lineWidth: 2, interval: 10, intervalOffset : 30, offset: 0.84 }, minorTickMarks: { visible: true, length: 8, lineWidth: 2, interval: 2, intervalOffset: 30, offset: 0.84 }, labels: { orientation: 'horizontal', interval: 10, intervalOffset: 30, offset: 1.00 }, needles: [ { value: 100, type: 'pointer', outerOffset: 0.8, mediumOffset: 0.7, width: 10, fillStyle: '#252E32' } ], ranges: [ { outerOffset: 0.82, innerStartOffset: 0.76, innerEndOffset: 0.68, startValue: 0, endValue: 110, fillStyle: gradient1 }, { outerOffset: 0.82, innerStartOffset: 0.68, innerEndOffset: 0.60, startValue: 110, endValue: 150, fillStyle: gradient2 } ] } ] }); }); </script> </head> <body> <div> <div id="jqRadialGauge" style="width: 350px; height: 350px;"> </div> </div> </body> </html> |