1. Home
  2. Forum
  3. Vue
  4. Make annotation content and axis value dynamic based on Vuex store value

Make annotation content and axis value dynamic based on Vuex store value

Hello! I'm trying to make Circular Gagues axis value and annotation dynamic. Meaning that when my filter changes and Vuex store gets updated I would like to update Circular Gague's data as well. All examples are with static data for axis value and annotation. And I can't figure out how to appoach this.

If I use Vuex getters in a way all CG examples are built (using templates) then I only get one-way value setting ... value is set on page reload and even if data changes in background, gauge isn't updated.

How could I set axis value and annotation dynamically?

Thanks!

3 Replies
SB Swetha Babu Syncfusion Team April 16, 2020 02:53 PM UTC

Hi Janno, 

Thank you for contacting Syncfusion support. 

We have analyzed your query and came to know that you need to update the pointer value and annotation values dynamically. We can update the pointer value using setPointerValue() method and annotation value using setAnnotationValue() method. We have created a vue application to demonstrate the same and it can be downloaded from the following location. 


In the above sample, we have provided a button element. In the button click, we have changed the pointer and annotation values using the mentioned functions. 

Please let us know if you need further assistance. 

Regards, 
Swetha Babu

JL Janno Liivak April 16, 2020 05:41 PM UTC

Thanks! All good now! Maybe you could explain why whole gauge get's reloaded when I use computed property for pointer color? My annotation value and pointer value get set to default when color get's updated through computed property. If I for example set pointer color to just fixed color, then my dynamically set annotation and pointer value don't get reset.

SB Swetha Babu Syncfusion Team April 17, 2020 02:09 PM UTC

Hi Janno, 

Thanks for your update. 

We have analyzed your query and came to know that you need to update the color for the pointer. We can update the color of the pointer dynamically in the circular gauge. We have created the vue application to demonstrate the same and it can be downloaded from the following location. 


In the above sample, we have provided two button elements. One of the button for updating the pointer using the object of the circular gauge and other button element for updating the pointer value using the computed method. Please let us know that the above sample resolves your issue. If not, please modify the above application and share the same to us or provide us the code snippet to reproduce the reported issue. It will be helpful for us to analyze further and assist you better. 


Please let us know if you need further assistance. 

Regards, 
Swetha Babu

Loader.
Up arrow icon