JqxGauge animation not working

[ChrisB84Participant]

Hi,

I have an Angular app and I cannot get the animation on the JqxGauge to work. The gauge is displayed, but when the page loads, the needle already points at my value (90). Rather than animating up to it.

Also, my label (which reads “90mph”) is displaying underneath the gauge, rather than inside it.

My code is exactly the same as the demo here, using the circular one:
https://www.jqwidgets.com/angular/angular-gauge/#https://www.jqwidgets.com/angular/angular-gauge/angular-gauge-defaultfunctionality.htm

I notice in the demo, the component is implementing AfterViewInit, but there is no implementation of the method ngAfterViewInit(). So I have an empty method.
I added a console log to the method onValueChanging(). I get 120 console logs, and the value for all of them is 90 (as opposed to going up to 90 gradually. My animationDuration is set to 1200, so to get 120 print outs makes sense).

Can anyone help with this please or provide pointers?

Thanks

[ChrisB84Participant]

Okay, really bad error, there actually was an ngAfterViewInit() method that I had missed… I was looking for it at the bottom before!

So I’ve fixed the animation but still have the issue with the label showing underneath?

[HristoParticipant]

Hello ChrisB84,

It seems the style settings do not reflect on the element.
Please, try to refresh that.
I would like to suggest you look at this example.
Another option you could try to set these styles from app.component.css file to styles.css file.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts