How to animate the ranges of circular gauge
You can animate the ranges of circular gauge in the renderComplete method. You can refresh the start and end values of the gauge range in the set interval method.
Follow the given steps to animate the ranges of circular gauge:
Step 1: Create a circular gauge with some ranges and enable the animation for gauge.
$("#gauge").ejCircularGauge({ backgroundColor: "#f0f0f0", width: 190, height: 76, radius: 82, frame: { frameType: 'halfcircle', halfCircleFrameStartAngle: 180, halfCircleFrameEndAngle: 360 }, animate: true, scales: [{ showRanges: true, startAngle: 180, sweepAngle: 180, radius: 92, showScaleBar: false, size: 1, maximum: 100, majorIntervalValue: 20, minorIntervalValue: 10, ranges: [{ distanceFromScale: 0, startValue: 0, endValue: 0, backgroundColor: "rgba(54,158,99,1)", border:{ color: "rgba(54,158,99,1)" }, size: 20 }, { distanceFromScale: 0, startValue:0, endValue: 0, backgroundColor: "rgba(54,158,99,0.3)", border:{ color: "rgba(54,158,99,0.3)" }, size: 20 }] }] }); |
Step 2: In the renderComplete method, refresh the start end values of range using the set interval method.
$("#gauge").ejCircularGauge({ renderComplete:"animation", });
function animation(sender) { var rangeEndValue1 = 50, rangeEndValue2 = 100; setInterval(function() { if(sender.model.scales[0].ranges[0].endValue < rangeEndValue1) sender.model.scales[0].ranges[0].endValue += 5; else { sender.model.scales[0].ranges[1].startValue = rangeEndValue1; if(sender.model.scales[0].ranges[1].endValue < sender.model.scales[0].ranges[0].endValue) sender.model.scales[0].ranges[1].endValue = rangeEndValue1; if(sender.model.scales[0].ranges[1].endValue < rangeEndValue2) sender.model.scales[0].ranges[1].endValue += 5; } var gauge = $("#gauge").data("ejCircularGauge"); gauge.redraw("scale"); },100); } |
Sample link: https://jsplayground.syncfusion.com/wgm1xhkl
