We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Custom AngularJS Directive with ejCircularGauge Reverting To Original Value

Thread ID:

Created:

Updated:

Platform:

Replies:

132667 Sep 14,2017 11:31 AM Sep 15,2017 04:49 AM JavaScript 2
loading
Tags: ejCircularGauge
Craig Boucher
Asked On September 14, 2017 11:31 AM

http://jsplayground.syncfusion.com/pyc4451u

I need to create a custom AngularJS directive for the Javascript circular gauge so I can dynamically set the number of scale ranges at runtime (I couldn't figure out how to do this with the delivered AngularJS directive).  I'm starting off very basic with the default gauge and just updating the value every 10 seconds.  Every time the value is changed, the gauge redraws itself and goes back to the first value it received.  

When I step through the Javascript in Chrome developer tools, the pointer does change to the new value after it is updated, but later redraws itself back to the original value.

I'm no SyncFusion or AngularJS expert so any help is appreciated.

Thanks,
Craig

Craig Boucher
Replied On September 14, 2017 05:07 PM

I figured out that I needed to set enableAnimation to false and then it worked correctly.

Craig


Saravana Kumar Kanagavel [Syncfusion]
Replied On September 15, 2017 04:49 AM

Hi Craig, 

Thanks for contacting Syncfusion Support. 
We have analyzed your query and modified the sample based on your requirement. Please refer the code example below 

[JS] 
         var ejObject = $(element).data("ejCircularGauge");      
            scope.$watch("value", function(newVal, oldVal) { 
                        ejObject.setPointerValue(0,0,newVal); // setPointerValue(0 => represent the scale index, 0 => represent the pointer index,newVal => to update the pointer value ) 
               }); 
 

In the above code, we are calling the method of ”setPointerValue” to update the pointer value. In the case, if you have setting the enableAnimation property either true or false, it will work properly. 

You can find the sample from the below location. 

Please let us know if you have any concern on this. 

Regards, 
Saravana Kumar K. 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;