Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Umer Waheed
145
IgxRadialGaugeComponent
posted
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);
  }
Parents
No Data
Reply
  • 34830
    Offline posted

    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.

Children
No Data