Rad Linear Gauge width changing with labels

2 posts, 0 answers
  1. ADT
    ADT avatar
    9 posts
    Member since:
    Jun 2011

    Posted 03 Oct 2014 Link to this post

    I'm trying to put two rad gauges on top of each other. If I set the labels visible = false for the top gauge, it has a completely different size than the bottom. Why does this happen?
    aspx code:
    <telerik:RadLinearGauge runat="server" ID="rlgOverHeadActual" Width="590px" Height="70px"
                     Skin="Windows7"
                   Style="float: left; " ResolvedRenderMode="Classic" >
     
                   <Pointer Shape="BarIndicator" Size="15"  Color="#D8B179"   >
                       <Track Color="#646262" Visible="true" Opacity="0.4" />
                   </Pointer>     
                   <Scale Vertical="false"    >
                        
                        <MajorTicks Visible="false" Size="20" Color="Black"/>
                        <MinorTicks Visible="false" Size="10" Color="Black" />
                        <Labels Visible="false"  />
     
                        <Ranges   >
                            
                         </Ranges>
                   </Scale>
                    
              </telerik:RadLinearGauge><telerik:RadLinearGauge runat="server" ID="rlgOverhead" Width="590px" Height="70px"
                     Skin="Windows7"
                   Style="float: left;" ResolvedRenderMode="Classic" >
     
                   <Pointer Shape="BarIndicator" Size="15"  Color="#566D8F"   >
                       <Track Color="#646262" Visible="true" Opacity="0.4" />
                   </Pointer>     
                   <Scale Vertical="false"    >
                        
                        <MajorTicks Visible="true" Size="20" Color="Black"/>
                        <MinorTicks Visible="true" Size="10" Color="Black" />
                        <Labels  />
     
                        <Ranges   >
                            
                         </Ranges>
                   </Scale>
              </telerik:RadLinearGauge>
              <asp:Label ID="lbltest" runat="server"></asp:Label>
             <asp:SqlDataSource ID="sqlOverHead" runat="server"
                ConnectionString="<%$ ConnectionStrings:IntranetConnectionString %>"
                SelectCommand="USP_Intranet_Select_Overhead" SelectCommandType="StoredProcedure"></asp:SqlDataSource>

    VB Code with some formatting options that I'm doing:
    Private Sub OverHeadGauge()
           Dim dvOverHeadGauge As DataView
           Dim decOHBudgetAmount As Decimal = 0
           Dim decOHExpenseAmount As Decimal = 0
           Dim dtOverHeadGoodThrough As DateTime = "8/1/2014"
           dvOverHeadGauge = CType(sqlOverHead.Select(DataSourceSelectArguments.Empty), DataView)
           '        intFiscalYear = CType(dv.Table.Rows(0)(0), Integer)
           decOHBudgetAmount = CType(dvOverHeadGauge.Table.Rows(0)(0), Decimal)
           decOHBudgetAmount = Math.Round(decOHBudgetAmount / 1000000, 2)
           decOHExpenseAmount = CType(dvOverHeadGauge.Table.Rows(0)(1), Decimal)
           decOHExpenseAmount = Math.Round(decOHExpenseAmount / 1000000, 2)
           dtOverHeadGoodThrough = CType(dvOverHeadGauge.Table.Rows(0)(2), DateTime)
           Dim decMonthscale As Decimal = decOHBudgetAmount / 12
           Dim mthFY As Integer = 0
           Select Case Month(dtOverHeadGoodThrough)
               Case 1
                   mthFY = 7
               Case 2
                   mthFY = 8
               Case 3
                   mthFY = 9
               Case 4
                   mthFY = 10
               Case 5
                   mthFY = 11
               Case 6
                   mthFY = 12
               Case 7
                   mthFY = 1
               Case 8
                   mthFY = 2
               Case 9
                   mthFY = 3
               Case 10
                   mthFY = 4
               Case 11
                   mthFY = 5
               Case 12
                   mthFY = 6
           End Select
     
           decMonthscale = decMonthscale * mthFY
     
           'Set the top grid
           rlgOverHeadActual.Scale.Min = 0
           rlgOverHeadActual.Scale.Max = Math.Round(decOHBudgetAmount + 0.5, 0)
     
           rlgOverHeadActual.Pointer.Value = decOHExpenseAmount
           'rlgOverHeadActual.Scale.Labels.Visible = False
           rlgOverHeadActual.Scale.MinorTicks.Visible = False
           rlgOverHeadActual.Scale.MajorTicks.Visible = False
           rlgOverHeadActual.Scale.Labels.Format = "${0}m"
           'rlgOverHeadActual.Scale.Labels.Font = "15px 'PT Sans', sans-serif"
     
           If decOHExpenseAmount > decOHBudgetAmount Then
               rlgOverHeadActual.Pointer.Color = Drawing.Color.Red
           End If
     
     
           'decOHExpenseAmount = decOHBudgetAmount * 9
           rlgOverhead.Scale.Min = 0
           rlgOverhead.Scale.Max = Math.Round(decOHBudgetAmount + 0.5, 0)
           rlgOverhead.Scale.MajorUnit = 1
           rlgOverhead.Scale.MinorUnit = 0.1
           rlgOverhead.Pointer.Value = decMonthscale
           rlgOverhead.Scale.Labels.Format = "${0}m"
           'rlgOverhead.Scale.Labels.Font = "15px 'PT Sans', sans-serif"
     
     
           Dim gr1 As New GaugeRange()
           Dim gr2 As New GaugeRange()
     
           gr1.From = decOHBudgetAmount
           gr1.To = rlgOverhead.Scale.Max
           gr1.Color = Drawing.ColorTranslator.FromHtml("#B14747") 'Drawing.Color.Red
     
        
     
           rlgOverhead.Scale.Ranges.Add(gr1)
           'rlgOverhead.Scale.Ranges.Add(gr2)
     
     
     
     
     
       End Sub


  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 06 Oct 2014 Link to this post

    Hi,

    Generally the calculation of the gauge's dimensions also includes the controls elements. What I can suggest is that instead of hiding the labels to set a "transparent" color. For example:
    ASPX:
    <telerik:RadLinearGauge runat="server" ID="rlgOverHeadActual" Width="590px" Height="70px"
        Skin="Windows7"
        Style="float: left;position:absolute;top:-2px;left:8px;">
     
        <Pointer Shape="BarIndicator" Size="15" Color="#D8B179">
            <Track Color="#646262" Visible="true" Opacity="0.4" />
        </Pointer>
        <Scale Vertical="false">
     
            <MajorTicks Visible="false" Size="20" Color="Black" />
            <MinorTicks Visible="false" Size="10" Color="Black" />
            <Labels Visible="true" Color="Transparent" />
     
            <Ranges>
            </Ranges>
        </Scale>
     
    </telerik:RadLinearGauge>
    <telerik:RadLinearGauge runat="server" ID="rlgOverhead" Width="590px" Height="70px"
        Skin="Windows7"
        Style="float: left;">
     
        <Pointer Shape="BarIndicator" Size="15" Color="#566D8F">
            <Track Color="#646262" Visible="true" Opacity="0.4" />
        </Pointer>
        <Scale Vertical="false">
     
            <MajorTicks Visible="true" Size="20" Color="Black" />
            <MinorTicks Visible="true" Size="10" Color="Black" />
            <Labels />
     
            <Ranges>
            </Ranges>
        </Scale>
    </telerik:RadLinearGauge>

    You may also find useful this feedback item.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top