This is a migrated thread and some comments may be shown as answers.
Dynamically change range sizes on radial gauge
1 Answer 129 Views
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 22 Jul 2013, 01:31 PM
Hi

I currently have the following but I would like to be able to specify the ranges dynamically using sliders. Can anyone tell me how to implement this?

Note - there will always be four ranges, its just where these start and stop is where I want to regulate.

@(Html.Kendo().RadialGauge()
.Name("testRadialGauge")
.Pointer(pointer => pointer
.Value(0)
.Color("Blue")
)
.Scale(scale => scale
.MinorUnit(200)
.StartAngle(-30)
.EndAngle(210)
.Max(5000)
.Labels(GaugeRadialScaleLabels => GaugeRadialScaleLabels
.Visible(true)
                         )
.Ranges(ranges =>
{
ranges.Add().From(0).To(800).Color("#c20000");
ranges.Add().From(800).To(1600).Color("#ff7a00");
ranges.Add().From(1600).To(2000).Color("#ffc700");
ranges.Add().From(2000).To(5000).Color("green");
})
)
)
            
      

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 24 Jul 2013, 08:40 AM
Hello Ian,

Basically Kendo UI Radial Gauge does not support dynamic changes of its configuration options, however you could workaround it and set new ranges via the options (keep in mind you should redraw the Gauge). For example: 

//get reference to the Gauge widget
var gauge = $("#gauge").data("kendoRadialGauge");
//get the Gauge ranges
var ranges = gauge.options.scale.ranges;
//set 1000 as "from" value to the second range
ranges[1].from = 1000;
//redraw the Gauge
gauge.redraw();
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Ian
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or