This is a migrated thread and some comments may be shown as answers.

Radial gauge angle & displaying issues

3 Answers 170 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Syleps
Top achievements
Rank 1
Veteran
Syleps asked on 01 Apr 2020, 10:28 AM
Hi,

I have 2 questions about the radial gauge :

1) center gauge area on pointer origin

If we take the example provided in the demonstration, and we change the angles from 90° to 270°, the gauge area is no longer centered relative to the container.
Is there a way for the center of the gauge to always be the origin of the pointer ?

2) 360° gauge angle

If we take the example provided in the demonstration, and we change the angles from 90° to 450°, the 0 and the 180 are displayed one on top of the other.
Is there a way to hide either end of the scale labels ?
This could be using for displaying a clock for example

Regards

3 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 03 Apr 2020, 09:30 AM

Hi Syleps,

In general, the Kendo UI RadialGauge is not centralized, regardless of the orientation. This is needed in order to have more space for the scale. The live demo that you refer to uses an image for the background. If you rotate the gauge, you should rotate the image as well.

As for the labels, you could make use of the scale's label template. Additional logic could be applied to check for the last value. You should return an empty string for the max value:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge/configuration/scale.labels.template

Let me know in case additional assistance is needed.

 

Regards,
Tsvetomir
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Syleps
Top achievements
Rank 1
Veteran
answered on 13 Apr 2020, 06:55 AM

Hi,

It's not a problem of rotation, but a problem of translation.

Each time you change a parameter (min / max, angle, unit, position of labels, ...), you need to change gauge area margin, even perform a zoom, to correctly reposition the center (= cap pointer); and this in pixels, which is not very "responsive design"

Take the demo with these parameters to understand what I am saying:

                            minorUnit: 0,
                            majorUnit: 500000,
                            startAngle: 0,
                            endAngle: 180,
                            max: 1000000,
                            labels: {
                                position: "outside"
                            },

 

What I would have liked is that my radial gauge is contained in a circle (or a square) and the center of my gauge always corresponds to the center of the container.

 

For the second point (label above). I had not seen the property. It works very well. Thank you.

 

Regards.

0
Tsvetomir
Telerik team
answered on 14 Apr 2020, 03:16 PM

Hello,

Thank you for the provided options. Indeed, the pointer cap is slightly offset. However, I would like to say that the offset is controlled solely by the start and end angle. This is due to the fact that the offset will provide greater visibility for the scale. The cap will be centered inside the element only when the scale makes a full 360 degrees range. 

If you remove the start and end angles from the options you have provided, you will notice that the scale and position of the cap would remain the same. 

I hope you find those clarifications helpful.

 

Regards,
Tsvetomir
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Gauge
Asked by
Syleps
Top achievements
Rank 1
Veteran
Answers by
Tsvetomir
Telerik team
Syleps
Top achievements
Rank 1
Veteran
Share this question
or