This sample demonstrates how to specify radial gauge elements order. Setting higher zIndex value to the visual element, moves it on top of the others.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Elements ZIndex Example - HTML5 jQuery Radial Gauge JavaScript Plugin </title> <link rel="stylesheet" type="text/css" href="../../css/dataviz.gauges.css" /> <script src="../../js/dataviz.gauges.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> 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' }] }; var radialGauge = new DataViz.RadialGauge({ 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 }, annotations: [ { text: 'Radial Gauge', font: '18px sans-serif', horizontalOffset: 0.5, verticalOffset: 0.80 } ], animation: { duration: 1 }, scales: [ { minimum: 0, maximum: 150, startAngle: 140, endAngle: 400, majorTickMarks: { length: 12, lineWidth: 2, interval: 10, offset: 0.84 }, minorTickMarks: { visible: true, length: 8, lineWidth: 2, interval: 2, offset: 0.84 }, labels: { orientation: 'horizontal', interval: 10, offset: 1.00 }, needles: [ { value: 100, type: 'pointer', outerOffset: 0.95, mediumOffset: 0.7, width: 10, fillStyle: '#252E32', zIndex: 2 } ], ranges: [ { outerOffset: 0.82, innerStartOffset: 0.76, innerEndOffset: 0.68, startValue: 40, endValue: 110, fillStyle: gradient1, zIndex: 3 }, { outerOffset: 0.82, innerStartOffset: 0.68, innerEndOffset: 0.60, startValue: 110, endValue: 150, fillStyle: gradient2, zIndex: 3 } ] } ] }); radialGauge.addEventListener('tooltipFormat', function (e, data) { var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '<br />'; switch (data.elementType) { case 'needle': tooltip += 'Value: ' + data.value; break; case 'range': tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue; } e.result = tooltip; }); radialGauge.write('container'); </script> </head> <body> <div> <div id="container" style="width: 350px; height: 350px;"> </div> </div> </body> </html> |