This sample demonstrates how to specify multiple radial gauge scales.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Multiple Scales 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 }, annotations: [ { text: 'km/h', fillStyle: '#339CFF', font: '16px sans-serif', horizontalOffset: 0.5, verticalOffset: 0.76 }, { text: 'MPH', fillStyle: '#FF3366', font: '16px sans-serif', horizontalOffset: 0.5, verticalOffset: 0.81 } ], scales: [ { minimum: 0, maximum: 150, interval: 10, startAngle: 120, endAngle: 420, labels: { offset: 1.00 }, majorTickMarks: { length: 14, lineWidth: 2, offset: 0.82, strokeStyle: '#FF3366' }, minorTickMarks: { visible: true, length: 8, lineWidth: 2, interval: 2, offset: 0.82, strokeStyle: '#FF3366' }, ranges: [ { outerOffset: 0.83, innerStartOffset: 0.81, innerEndOffset: 0.81, startValue: 0, endValue: 150, fillStyle: '#FF3366' } ], needles: [ { value: 105, type: 'pointer', outerOffset: 0.8, mediumOffset: 0.7, width: 10, fillStyle: '#252E32' } ] }, { minimum: 0, maximum: 240, interval: 20, startAngle: 120, endAngle: 420, labels: { offset: 0.60 }, majorTickMarks: { length: 14, lineWidth: 2, offset: 0.68, strokeStyle: '#339CFF' }, minorTickMarks: { visible: true, length: 8, lineWidth: 2, interval: 5, offset: 0.72, strokeStyle: '#339CFF' }, ranges: [ { outerOffset: 0.79, innerStartOffset: 0.77, innerEndOffset: 0.77, startValue: 0, endValue: 240, fillStyle: '#339CFF' } ] } ] }); }); </script> </head> <body> <div> <div id="jqRadialGauge" style="width: 350px; height: 350px;"> </div> </div> </body> </html> |