Radial gauge not displaying correctly and how to create arrow as shown

Image_6631_1708860412786

As shown in the picture there are two controls, the first of which indicates the wind direction, I have bound the data but it doesn't seem to work


The second data is pressure but that doesn't seem to work either, I suspect there is a problem with the data binding?

Image_1734_1708860665504



5 Replies

SH Shompinice February 25, 2024 12:38 PM UTC

The file is here

Weather.zip



VO Vishal Omprasad Syncfusion Team February 26, 2024 01:58 PM UTC

Hi Shompinice,

Currently, we are analyzing your query. We will validate and update you with further details on or before February 27, 2024. We appreciate your patience until then.

Regards,
Vishal O.



VO Vishal Omprasad Syncfusion Team February 27, 2024 09:34 AM UTC

Hi Shompinice,

Regarding “data binding doesn’t seem to work”:

Based on the shared information we have checked the reported query with your shared sample and noticed that it is a sample level issue. In your sample, you have set the StartAngle to 0, which initiates the scale from the extreme right. Additionally, the EndValue is set to 80 with an Interval of 20, based on this EndValue. To achieve your requirements, it's necessary to adjust the StartAngle to 270, which will commence the scale from the top (North)., as shown in the following code snippet.

[Before]:

<gauge:CircularScale ShowLabels="False"

                                                                        Interval="20"

                                                                        MinorTicksPerInterval="0"

                                                                        StartValue="0"

                                                                        EndValue="80"

                                                                        StartAngle="0"

                                                                        SweepAngle="360">

      

</gauge:CircularScale>

[After]:

<gauge:CircularScale ShowLabels="False"

                                                                        Interval="20"

                                                                        MinorTicksPerInterval="0"

                                                                        StartValue="0"

                                                                        EndValue="80"

                                                                        StartAngle="270"

                                                                        SweepAngle="360">

      

</gauge:CircularScale>

We have shared the tested output screenshots (with Labels visible for better understanding) below for your reference.

Please note that if your scale’s range is maximum, you need to adjust the EndValue and Interval accordingly.

Regarding “how to create an arrow as shown in the image?”:

Your requirement can be achieved at sample level using the NeedlePointer and SymbolPointer. We have prepared an example sample and attached below for your reference, where we have included two Needle pointers and two Symbol pointers to achieve the desired output as you expected. In the sample, we have provided the values hard coded.

Please check our sample and let us know whether your requirement is achieved.

If you have any further questions or require assistance with any other aspect, please do not hesitate to let us know. We are here to help.

Regards,
Vishal O.


Attachment: GaugePointerBinding_5dfa9cfb.zip


SH Shompinice replied to Vishal Omprasad February 27, 2024 02:37 PM UTC

Image_8268_1709044645539
Where is the Arrow?



VO Vishal Omprasad Syncfusion Team February 28, 2024 10:37 AM UTC

Hi Shompinice,

Regarding “where is the arrow?”:

As mentioned in our previous update, we have provided the values hard coded, including the color of the pointers, which were set to Black considering the light theme. This made it difficult to view the pointers in the dark theme.

Now, we have modified the sample considering the dark theme, allowing you to clearly see the arrow. Please check our sample and let us know whether your requirement is achieved.

If you have any further questions or require assistance with any other aspect, please do not hesitate to let us know. We are here to help.

Regards,
Vishal O.


Attachment: GaugePointerBinding_5bd5234b.zip

Loader.
Up arrow icon