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

Adding title / legend for RadialGauge

6 Answers 317 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Chili
Top achievements
Rank 1
Chili asked on 05 Sep 2018, 07:21 AM

Hello. Is there a possibility to add a Title or Legend inside the @(Html.Kendo().RadialGauge() )? By trying .title or .legend nothing appears. In the demo's there arent titles nor legends. 

 

Regards.

6 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 05 Sep 2018, 08:30 AM
Hi,

For the time being the RadialGauge component does not provide pointers legend or title functionality. Can you please submit your feature request and vote in the Kendo Uservoice portal at: Radial/Linear gauges.
 
Thank you!

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Chili
Top achievements
Rank 1
answered on 05 Sep 2018, 08:49 AM
Dear Rumen, When I want to vote. My IP gets saved and I dont want that. So i can not vote.
0
Chili
Top achievements
Rank 1
answered on 05 Sep 2018, 09:02 AM
Also, is there a possibility to put a border around the gauge like in the picture. It is something with gaugeArea (if im not mistaken). The documentation is very bad
0
Rumen
Telerik team
answered on 05 Sep 2018, 10:51 AM
Hi there,

I will pass your request and vote to the Product Manager. Thank you!

As for the new question, there are two approaches to achieve the goal:
  • Add a background image under the gauge wrapper as it is made in the Scale options demo (screenshot)
  • or use the built-in API of the Gauge to increase the Scale -> RangeSize.


    var gauge = $("#radialGauge").data("kendoRadialGauge");
    var opts = gauge.options;
    opts.scale = opts.scale || {};
    opts.scale.rangeSize = 50;
    gauge.setOptions(opts);
    gauge.redraw();

 


Best regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Chili
Top achievements
Rank 1
answered on 05 Sep 2018, 11:58 AM

Dear Rumen,

By using an image will it take a lot of time to scale it correctly.

In my code I have: 
.Scale(scale => scale
            .RangeSize(50)

)

By using rangeSize it only *increases* the width of ranges not the actual border. Maybe this idea could be a feature to add
.Scale(scale => scale
            .Border(number of pixels).Color("color")
)

If I am correct I also cant add a 'border' between the ranges. So you can get a better view from where a range ends.

Kind regards.

 

0
Rumen
Telerik team
answered on 05 Sep 2018, 12:25 PM
The requested border feature is currently not available in the component and I proposed two workarounds for achieving closer results.

The image background requires  to find or draw your own image and to properly position it under the gauge. 
The RangeSize option allows you to increase the range, but does not draw a top border. Yes, this could be a feature request.

You can see what is available as an API from the base Kendo UI RadialGauge widget in the Kendo UI documentation - https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge#methods.

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Gauge
Asked by
Chili
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Chili
Top achievements
Rank 1
Share this question
or