Completed
Last Updated: 20 May 2016 12:06 by ngNurses
ADMIN
Created by: Marin Bratanov
Comments: 1
Category: Gauge
Type: Feature Request
9
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
Approved
Last Updated: 12 Jan 2016 07:42 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: Gauge
Type: Bug Report
1
Workaround:

  1) Use   RenderAs="SVG".
  2)  Set 100% width to the gauge's wrapper prior the resizing

      <telerik:RadScriptManager ID="scriptManager" runat="server">
        </telerik:RadScriptManager>

        <table style="width: 100%;">
            <tr>
                <td>
                    <div style="width: 100%;" id="gauge"></div>
                    <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" RenderAs="SVG" Width="100%">
                        <Pointer Color="Gray" Size="10" />
                        <Scale Vertical="false" Min="0" Max="40">
                            <MinorTicks Size="20" />
                            <Ranges>
                                <telerik:GaugeRange Color="#D7E5D1" From="0" To="10" />
                                <telerik:GaugeRange Color="#EBE6D2" From="10" To="20" />
                                <telerik:GaugeRange Color="#F5D2D1" From="20" To="30" />
                            </Ranges>
                        </Scale>
                    </telerik:RadLinearGauge>
                </td>
            </tr>
        </table>
   
            <script type="text/javascript">
         
                $(window).resize(function () {
                   //Workaround
                    $("#<%= RadLinearGauge1.ClientID %> > div")[0].style.width = "100%";
                    $find('<%= RadLinearGauge1.ClientID %>').get_kendoWidget().resize();

                });


            </script>
        </telerik:RadCodeBlock>
Approved
Last Updated: 12 Jan 2016 07:39 by ADMIN
Completed
Last Updated: 29 Sep 2015 10:49 by Andreas
Approved
Last Updated: 10 Jun 2015 07:08 by ADMIN
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>
Completed
Last Updated: 30 Apr 2015 14:35 by ADMIN
The following:

<telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" width=100%></telerik:RadLinearGauge>

will result in the width being set as 100px
Approved
Last Updated: 09 Mar 2014 07:12 by adi
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: Gauge
Type: Bug Report
4

			
Approved
Last Updated: 17 Jan 2014 08:02 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: Gauge
Type: Feature Request
0
Expose an additional property in RadGauge that controls the margin for the gaugeArea.
Approved
Last Updated: 04 Sep 2013 14:50 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 0
Category: Gauge
Type: Bug Report
2
If the gauge must display a huge range of values (e.g. Min=0, Max=500 000) having visible MinorTicks blocks the browser and ultimately throws an "out of stack space error".

The workaround is to set 
MinorTicks.Visible = false 
or Scale.MinorUnit to a sufficiently large value. If the minor unit is not set properly the minor ticks will clutter together and will be unreadable.
Completed
Last Updated: 04 Jul 2013 14:57 by ADMIN
1 2