multiple scales question

Question

On the page...https://help.syncfusion.com/xamarin/circular-gauge/scales?cs-save-lang=1&cs-lang=xaml, down the page, where it talks about multiple scales, I am not understanding what is causing the seperation between the two scales. I copied this code and it does work.

Is it this 'ScaleStartOffset="0.7" ScaleEndOffset="0.69">', or 'StartOffset="0.7" EndOffset="0.77"'. If so, what are these values, pixel positioning, or what? I am using the code in the syncfusion essential studio samples 'DirectionCompass' code, adding another scale, but they seem to be overwritting each other. Is doing a gauge as 360 the problem, or what?

Thanks.

Ramya Soundar Rajan · Accepted Answer

Hi Louis, 
 
Query 1: I have tried two different LabelCreated events, (one for each scale), but only the first one is used, and it puts the same values on both scales (I debugged, and it never gets to the second event).  
 
We are glad to announce that our weekly NuGet was rolled out and fix for the reported issue in this query was included in the weekly NuGet.  NuGet Version: 18.2.0.54 
 
Query 2: outer scale tics (except the first one ('N'), do not line up exactly with their tick counterparts in the inner scale.  I am not sure that making the outer scale, the inner scale, will correct this. 
 
Due to some pending test cases, we were unable to include the fix in our current weekly NuGet. We are currently ensuring that, we will include this fix in our upcoming weekly NuGet which is expected to be rolled out on August 25, 2020. 
 
Regards, 
Ramya S

Ramya Soundar Rajan · Answer

Hi Louis, 
  
Greetings from Syncfusion. 
  
Query: I am not understanding what is causing the seperation between the two scales. Is it this 'ScaleStartOffset="0.7" ScaleEndOffset="0.69">' 
  
Yes. We would like to let you know that to make a distance between the two scales, please use the below properties  
  
ScaleStartOffset - Used to define where the scale position starts. 
  
ScaleEndOffset - Used to define where the scale position ends.  
  
RadiusFactor - define where the Rim position starts and ends, and it ranges from 0(center position) to 1(corner). 
  
By using these properties, we have prepared a sample based on your requirement. Please find the sample from below location. 
  
SampleLink: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CircularGaugeDemo_MultipleScale935191627 
 
Output: 
 
  
 
To know more, please refer the below link 
  
https://help.syncfusion.com/xamarin/circular-gauge/rim#setting-position-for-rim 
  
https://www.syncfusion.com/kb/8296/how-to-customize-rim-position-for-scale 
  
https://www.syncfusion.com/kb/11426 
  
https://www.syncfusion.com/kb/8297 
  
Is doing a gauge as 360 the problem, or what?  - No, it doesn't make a problem. 
Please also know the use of below properties 
  
The StartOffset and EndOffset properties of TickSettings is used to customize the start and end position of ticks. 
  
Regards, 
Ramya S

Swetha Srikumar · Answer

From: Louis ElstonSent: Wednesday, July 1, 2020 12:37 PMTo: Syncfusion Support <support@syncfusion.com>Subject: RE: Syncfusion support community forum 155656, multiple scales question, has been updated. 
 
I looked at the links that you attached, and the code. 
 
Let’s see if I have this right.  RadiusFactor deals with rim.  ScaleStart and ScaleEnd deal with the scale	icks\marks that follow along the rim? 
 
Scale 2 (outer rim), starts with a radius factor of 0.6.  This 0.6 positions the rim at a certain height (certain point (Pixel?)) on the page?   Scale2 does not use ScaleStart\End because it is using the defaults for the width of the rim? 
 
Scale1 (inner rim), ScaleStartOffset="0.98".  Is this a position in relation to the top of the page, or from the second\inner rim?  I changed ScaleStartOffset="0.98" to 0.88 and ran.  I was expecting that this might move the inner scale closer to the outer scale (positioning), but instead it made the outer rim narrower.  I just do not understand. 
 
Why use RadiusFactor on one scale and not the other, and the same question for ScaleStart\End? 
 
Does it matter the order of the scales, the inner ones appears lower in the XAML code? 
 
What is StartAngle, why starts at 270? 
 
Thanks

Ramya Soundar Rajan · Answer

Hi Louis, 
 
Query 1: RadiusFactor deals with rim.  ScaleStart and ScaleEnd deal with the scale	icks\marks that follow along the rim?  
 
We would like to inform that RadiuFactor and Scale offset properties deals with same functionality to customize the position and size of the scale rim (scale line). You can customize the rim either in below two ways.  
   
1.       RadiusFactor with RimThickness property   
-          This way is used to define the size of rim in logical pixels from it start position. RadiusFactor property is used to define the start position of the scale rim in factor value (between 0 to 1). Rim position is determined by multiplying this factor value to the radius size of gauge circle (example: gauge radius (half of diameter) size is 100 and RadiusFactor is 0.6, then rim will be positioned at 60 pixel height from gauge center). RimThickness property is used to define the rim size in logical pixels.  
2.       ScaleStartOffset and ScaleEndOffset  
-          This way is used to define the scale rim position and size in factor value (between 0 to 1) for responsive size (size will be responsive in all the layout). Rim position and size is determined by multiplying this factor value to the radius size of gauge circle.  
 
Refer this link for more information: 
https://help.syncfusion.com/xamarin/circular-gauge/rim#setting-position-for-rim 
 
Query 2: Scale 2, starts with a radius factor of 0.6.  This 0.6 positions the rim at a certain height (certain point (Pixel?)) on the page?    
 
As informed above, RadiusFactor is used to define the rim start position from gauge center (example: gauge radius (half of diameter) size is 100 and RadiusFactor is 0.6, then rim will be positioned at 60 pixel height from gauge center).  
 
Query 3: Scale2 does not use ScaleStart\End because it is using the defaults for the width of the rim?  
 
No. In scale 2, RadiusFactor property is defined and rim size is taken from the default value of RimThinkness. So, scale start and end offset properties is no needed to define the rim size.    
 
Note: scale 1 is outer rim and scale 2 is inner rim in last updated sample.  
 
Query 4: Scale1, ScaleStartOffset="0.98".  Is this a position in relation to the top of the page, or from the second\inner rim? 
 
Scale 1 is outer scale and ScaleStartOffset and ScaleStartOffset properties is used to define the size and position of outer scale rim. Similarly, you can position the labels and ticks of scale using LabelOffset and tick setting offset properties.   
 
Query 5: Why use RadiusFactor on one scale and not the other, and the same question for ScaleStart\End?  
 
RadiusFactor and the ScaleStart/EndOffset properties only used to define the position and size of scale rim not other scale elements like scale, ticks.  
 
Query 6: Does it matter the order of the scales, the inner ones appears lower in the XAML code?  
 
No, the order of the scales not based on the scale added in XAML code. It based on scale elements position.  
 
Query 7: What is StartAngle, why starts at 270?  
 
StartAngle property is used to specify the start angle direction of scale. The scale range begins from start angle to end angle. The picture below illustrates the direction of angle from 0 degree to 360 degree. If you set StartAngle is 270, scale range will start from top and end to specified sweep angle direction value.   
  
 
Please let us know if you have any concern on this.  
 
Regards, 
Ramya S

Louis Elston · Answer

The reason that I wanted multiple gauges, one withen the other, is that I wanted two scales, like https://help.syncfusion.com/xamarin/circular-gauge/scales?cs-save-lang=1&cs-lang=xaml,.  I wanted the 360 degrees, (possibly broken down by ticks of 10, with labels of 10, 20, etc.) on one side of the rim, and then another scale, (N, NE, E, etc.), on the other side of the rim.  Or, both scales (if could be done), on one side (basically a label wwith two lines, 0, on top line, N on bottom line).  I have tried two different LabelCreated events, (one for each scale), but only the first one is used, and it puts the same values on both scales (I debugged, and it never gets to the second event ).  I see that you are using the same event for both scales.  I am assuming that this means that there can only be one such event for each gauge?

Louis Elston · Answer

https://www.syncfusion.com/blogs/post/temperature-monitor-using-circular-gauge-control-in-xamarin-forms.aspx, I used this as a starting point, to try again.This is the code... I have attached an image of the drawn scale. Notice that the outer scale tics (except the first one ('N'), do not line up exactly with their tick counterparts in the inner scale. I am not sure that making the outer scale, the inner scale, will correct this. Also, is it possible to get rid of the unmarked ticks (no text) in the outer scale?Attachment: Scales_95846723.7z

Ramya Soundar Rajan · Answer

Hi Louis,

Query 1: I have tried two different LabelCreated events, (one for each scale), but only the first one is used, and it puts the same values on both scales (I debugged, and it never gets to the second event).

We can reproduce the reported problem and we have considered “LabelCreated event not fired for the first scale when using two scale” as an issue. And the fix will be included in our Weekly NuGet which is scheduled to be rolled out on July 28, 2020. We appreciate your patience until then.

You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback link: https://www.syncfusion.com/feedback/16011

Note: The provided feedback link is private, and you need to login to view this feedback.

Query 2: outer scale tics (except the first one ('N'), do not line up exactly with their tick counterparts in the inner scale. I am not sure that making the outer scale, the inner scale, will correct this.

We can reproduce the reported problem in UWP platform. And the fix will be included in our Weekly NuGet which is scheduled to be rolled out on July 28, 2020. We appreciate your patience until then.

Query 3: Also, is it possible to get rid of the unmarked ticks (no text) in the outer scale.

You can disable the minor ticks in the outer scale by setting the value of MinorTicksPerInterval property as 0. Please refer the below code snippet.

<gauge:SfCircularGauge Margin="20">

<gauge:SfCircularGauge.Scales>

<gauge:Scale ShowRim="True" SweepAngle="360" ScaleStartOffset="0.85" RimThickness="2" RimColor="#f2f1f1" MinorTicksPerInterval="0"

StartAngle="270" StartValue="0" EndValue="360" Interval="10" LabelOffset="0.95" ShowLastLabel="False">

…

</gauge:SfCircularGauge.Scales>

</gauge:SfCircularGauge>

Regards,

Ramya S

Ramya Soundar Rajan · Answer

Hi Louis,  
 
Due to some technical hurdles, we were unable to include the fix in our latest weekly NuGet V18.2.0.47 . Currently we are working on resolving those. Hence, we will include this fix for the reported issue in our upcoming weekly NuGet which is expected to be rolled out on August 4, 2020. 
 
Regards, 
Ramya

Ramya Soundar Rajan · Answer

Hi Louis, 
 
Due to some pending test cases, we were unable to include the fix in our latest weekly NuGet V18.2.0.48. Currently we are working on resolving those. Hence, we will include this fix for the reported issue in our volume 2 SP1 release which is expected to be rolled out on mid of August 2020. 
 
Regards, 
Ramya S

Ramya Soundar Rajan · Answer

Hi Louis, 
 
Query 2: outer scale tics (except the first one ('N'), do not line up exactly with their tick counterparts in the inner scale.  I am not sure that making the outer scale, the inner scale, will correct this.  
 
As we are facing the technical complexity to resolve the reported problem. We are not able to provide solution as we promised. We will fix and provide solution in next weekly NuGet which is expected to be rolled out on September 1, 2020. 
 
Regards, 
Ramya S

Bharathiraja K · Answer

Hi Louis, 
 
We regret for the delay in providing solution for UWP ticks position. As we facing complexity on finding root cause of the issue, we were not able to move the fix as we promised. Still we are working on this and will include the fix in our upcoming Volume-3 release. Please be patient until then.  
 
Regards, 
Bharathi.