Round progress bar showing more than 100%

[Andreas Reitberger]

I want to indicate a progress higher than 100% like the apple watch circles. So once the 100 % is reached, the progress bar goes further.

Is there any control which can do this?

Thank you,

Andreas

[Devaraj Sekar]

Hi Andreas, 

Thank you for contacting Syncfusion support. 

We are unable to view the attached image from the incident. So, we request you to share the valid image once again to provide a prompt solution at earliest. 

Regards,
Devaraj S 

[Andreas Reitberger]

Hi,

I‘m currently only have access via phone.

Does this image work?

https://images.app.goo.gl/nM4YNsdQf6uzibjr7

I want a progress bar from 0 to 100%. However the progressbar should not stop at 100%. So if the value is 150% the progress bar should show a full circle and go further to 50%.

Thank you,

Andreas

[Devaraj Sekar]

Hi Andreas, 

Thank you update. 

We have received the image from you side and on further analysis with the provided information, we have prepared a sample using SfCircularGauge control, which can be downloaded from the below link. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GaugeSample-Pointer709657637 

Kindly let us know whether the provided sample fulfils your requirement. 

Regards,
Devaraj S 

[Andreas Reitberger]

Hi,

thank you for the example. It's almost working. However when I enter a value greate then 100, the gauge will not go further.

Please see the attached screenshots.

Screenshot 1# (Value 90)

This looks fine.

                                           

                                               

                                                             StartAngle="270" 

                                                             SweepAngle="360" 

                                                             StartValue="0" 

                                                             EndValue="100" 

                                                             ShowTicks="False" 

                                                             ShowLabels="False"  

                                                             ShowRim="True" 

                                                             RimColor="DarkBlue" 

                                                             ScaleStartOffset="0.9" 

                                                             ScaleEndOffset ="1"

                                                             EnableAutoInterval="True"

                                                             >

                                                   

                                                       

                                                            Value="90"

                                                            RangeStart="0"  

                                                            RangeCap="Both" 

                                                            x:Name="rangePointer" 

                                                            EnableAnimation="True" 

                                                            Color="LightBlue" 

                                                            StartOffset="0.9" 

                                                            EndOffset ="1" />

                                                   

                                               

                                           

Screenshot #2 (Value 125)

This looks bad

                                           

                                               

                                                             StartAngle="270" 

                                                             SweepAngle="360" 

                                                             StartValue="0" 

                                                             EndValue="100" 

                                                             ShowTicks="False" 

                                                             ShowLabels="False"  

                                                             ShowRim="True" 

                                                             RimColor="DarkBlue" 

                                                             ScaleStartOffset="0.9" 

                                                             ScaleEndOffset ="1"

                                                             EnableAutoInterval="True"

                                                             >

                                                   

                                                       

                                                            Value="125"

                                                            RangeStart="0"  

                                                            RangeCap="Both" 

                                                            x:Name="rangePointer" 

                                                            EnableAnimation="True" 

                                                            Color="LightBlue" 

                                                            StartOffset="0.9" 

                                                            EndOffset ="1" />

                                                   

                                               

                                           

                                       

Screenshot #3 (value 125, modifed with paint how it should look like)

Hope this helps understanding what I want to achieve.

Thank you for your help!

Attachment: Screenshots_c4009f38.zip

[Sridevi Sivakumar]

Hi Andreas Reitberger,

 

Thanks for your update.

We have analyzed your requirement. we will prepare the sample by using SfCircularGauge. And we update on or before 4th August 2020. 

Regards,
Sridevi S. 

[Sridevi Sivakumar]

Hi Andreas Reitberger,

On further analysis, we would like to let you know to achieve your requirement, we have manually reset the scale value 0 if exceeds more than 100. Since as per the current behavior, if scale end value is 100 then, we can’t render the pointer up to that end value.

Since the pointer is rendered newly when the pointer value reached 100, so getting that output to be like.

Let us know if you need any further assistance.

Regards,
Sridevi S.