For the time being you can use the following workaround: <script> var pointerSize = 35; function pageLoad() { var gauge = $find("<%=rgEpmScorecard.ClientID%>"); gauge._gaugeObject.options.scale.rangeSize = 25; gauge.repaint(); } </script> <telerik:RadRadialGauge ID="rgEpmScorecard" runat="server" Skin="Metro" Height="99px" Width="100px"> <Pointer Value="50" Color="Black"> <Cap Size="0.5" Color="Black" /> </Pointer> <Scale MajorUnit="10" Max="100" Labels-Visible="false" StartAngle="-45" EndAngle="225"> <MajorTicks Visible="false" /> <MinorTicks Visible="false" /> <Ranges> <telerik:GaugeRange Color="#ac1d23" From="0" To="16.67" /> <telerik:GaugeRange Color="#c26522" From="16.7" To="33.33" /> <telerik:GaugeRange Color="#d2b408" From="33.5" To="50" /> <telerik:GaugeRange Color="#b5be25" From="50.04" To="66.66" /> <telerik:GaugeRange Color="#0c833f" From="66.8" To="83.33" /> <telerik:GaugeRange Color="#0b6cb3" From="83.38" To="100" /> </Ranges> </Scale> </telerik:RadRadialGauge> <script> var dataviz = kendo.dataviz, draw = dataviz.drawing, Path = draw.Path, DEFAULT_LINE_WIDTH = 0.5; kendo.dataviz.RadialPointer.fn._renderNeedle = function () { var that = this; var options = that.options; var minorTickSize = that.scale.options.minorTicks.size; var center = that.center; var needleColor = options.color; var needlePath = new Path({ fill: { color: needleColor }, stroke: { color: needleColor, width: DEFAULT_LINE_WIDTH } }); needlePath.moveTo(center.x + that.radius - minorTickSize + pointerSize, center.y) .lineTo(center.x, center.y - (that.capSize / 2)) .lineTo(center.x, center.y + (that.capSize / 2)) .close(); return needlePath; } </script>
Label for the Gauge range in the RadGauge control. Apart from the individual points, need ability to name the range.
You can do this with the Template property of the Label object <telerik:RadLinearGauge runat="server" ID="rlg1"> <Scale Min="1" Max="4" MajorUnit="1"> <Labels Template="#= getLabelText(value)#" /> </Scale> </telerik:RadLinearGauge> <telerik:RadRadialGauge runat="server" ID="rrg1"> <Scale Min="1" Max="4" MajorUnit="1"> <Labels Template="#= getLabelText(value)#" /> </Scale> </telerik:RadRadialGauge> <script> function getLabelText(e) { return "label for " + e; } </script> For old versions the template can be set through the kendoWidget: ASPX: <script> function setGaugeLabels(value) { switch (value) { case -10: return "Min: " + -10; break; case 35: return "Max: " + 35; break; default: return "Name: " + value; break; } } function pageLoad() { var gaugeObj = $find("<%=RadLinearGauge1.ClientID%>")._gaugeObject; gaugeObj.options.scale.labels.template = "#=setGaugeLabels(value)#"; gaugeObj.redraw(); } </script> <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" Height="300px" Width="100px"> <Pointer Value="11" Color="Green"> </Pointer> <Scale Min="-25" Max="50" MajorUnit="15" MinorUnit="1"> <Labels Format="{0} °C" /> <Ranges> <telerik:GaugeRange From="-25" To="-5" Color="Blue" /> <telerik:GaugeRange From="-5" To="15" Color="LightBlue" /> <telerik:GaugeRange From="15" To="30" Color="GreenYellow" /> <telerik:GaugeRange From="30" To="50" Color="Red" /> </Ranges> </Scale> </telerik:RadLinearGauge>
It would be nice if RadGauges, the radial ones especially, could include a title element
Expose an additional property in RadGauge that controls the margin for the gaugeArea.
As a workaround the width of the range placeholder can be set through the gaugeObject: JavaScript: function pageLoad() { var gauge = $find("<%=RadRadialGauge1.ClientID%>"); gauge._gaugeObject.options.scale.rangeSize = 30; gauge.repaint(); } <telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="350px" Width="350px"> <Pointer Value="220" Color="Black"> <Cap Color="Gray" Size="0.1" /> </Pointer> <Scale Min="120" Max="300" MajorUnit="30" MinorUnit="5"> <Labels Format="{0} °C" Position="Outside" /> <Ranges> <telerik:GaugeRange Color="Orange" From="150" To="190" /> <telerik:GaugeRange Color="Green" From="190" To="230" /> <telerik:GaugeRange Color="Red" From="230" To="300" /> </Ranges> </Scale> </telerik:RadRadialGauge>
Add border and border appearance options like color, width and type for the RadGauge. Currently the background color of the RadGauge is set to the wrapper of the control. Improve that color so that it fits in with the border and the shape of the control.
Similar to kendo gauge's functionality: http://demos.telerik.com/kendo-ui/linear-gauge/multiple-pointers http://demos.telerik.com/kendo-ui/radial-gauge/multiple-pointers