IgxRadialGaugeComponent | Infragistics Forums

145

IgxRadialGaugeComponent

Umer Waheed posted over 1 year ago

IgxRadialGaugeComponent - Re-Animate on ranges add need help to control or turn off the animation ,

@ViewChild('radialGauge', { static: true })

public radialGauge!: IgxRadialGaugeComponent;

constructor() {}

ngOnInit(): void {

this.renderGuage();

}

ngOnChanges(): void {

this.renderGuage();

}

private renderGuage(): void {

this.radialGauge.transitionDuration = 500;

this.radialGauge.height = this.height;

this.radialGauge.width = this.width;

this.radialGauge.maximumValue = this.maxValue;

this.radialGauge.rangeBrushes = [this.color, this.color, this.color];

// setting appearance of labels

this.radialGauge.labelExtent = 0;

this.radialGauge.labelFormat = this.isEmptyGuage ? '___' : this.labelValue;

this.radialGauge.fontBrush = this.isEmptyGuage ? '#f3f3f5' : this.color;

this.radialGauge.font = this.fontSize;

this.radialGauge.scaleStartAngle = this.startAngle;

this.radialGauge.scaleEndAngle = this.endAngle;

this.radialGauge.scaleBrush =

this.isEmptyGuage || this.isHistoryView ? '#f3f3f5' : '#DADCE1';

this.radialGauge.scaleOversweep = 0;

// Backing Settings

this.radialGauge.backingBrush = 'transparent';

this.radialGauge.backingOutline = 'transparent';

this.radialGauge.minorTickStartExtent = 0;

this.radialGauge.minorTickEndExtent = 0;

this.radialGauge.tickStartExtent = 0;

this.radialGauge.tickEndExtent = 0;

this.radialGauge.needleShape = RadialGaugeNeedleShape.None;

this.radialGauge.needlePivotShape = RadialGaugePivotShape.None;

// setting custom gauge ranges

this.radialGauge.ranges.clear();

var gaugeProgress = new IgxRadialGaugeRangeComponent();

debugger;

gaugeProgress.startValue = 0;

gaugeProgress.endValue = this.isEmptyGuage

? 0

: this.progressValue > this.maxValue

? this.maxValue

: this.progressValue;

this.radialGauge.ranges.add(gaugeProgress);

}

34830

Offline Andrew Goldenbaum posted over 1 year ago

Hello Umer,

I am under the impression that you are looking to prevent animation of the IgxRadialGauge in certain circumstances. If my impression is incorrect, I would request that you please elaborate a bit further on your requirement so I may make a more concrete recommendation, as the following is based on this impression.

If you are looking to shut off animation in the IgxRadialGauge in certain circumstances, I would recommend setting the transitionDuration property to 0. This controls how long the animation takes to finish in milliseconds. If set to 0, the animation will not happen.

Please let me know if you have any other questions or concerns on this matter.
Cancel
Reply

Cancel