Scaling when all series values are equal

Thread is closed for posting
6 posts, 0 answers
  1. Paul
    Paul avatar
    8 posts
    Member since:
    Jul 2011

    Posted 28 Sep 2011 Link to this post

    Hi,

    I have a very basic chart with Dates on the X axis and percentages on the Y axis. I have the scale set to Auto like this:

     

     

     

     

    <YAxis AutoScale="True" IsZeroBased="false">

    The chart renders with % values of -5000% to +5000%. Ok, so I understand there is no delta between the min and max so the autoscale doesn't have anything to work with. So I attempted to manually set the scale IF all the values are equal. I did this in the PreRender event. But now, the chart does indeed have the proper manually set min scale %, but the max scale % is not visible. Ideas ?

    Protected Sub RadChart1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadChart1.PreRender
      
            Dim TheMinValue As Double
            Dim TheMaxValue As Double
            Dim TheValue As Double
      
            'Loop through each Y value in series 0 and get it's value. We need to get the 
            'Min and Max values for the entire chart.
            'For seriescount As Integer = 0 To RadChart1.Series.Count - 1
            For itemcount As Integer = 0 To RadChart1.Series(0).Items.Count - 1
                TheValue = RadChart1.Series(0).Item(itemcount).YValue
      
                'assign default values in the 1st iteration of the loop
                If itemcount = 0 Then
                    TheMinValue = TheValue
                    TheMaxValue = TheValue
                End If
      
                If TheValue < TheMinValue Then TheMinValue = TheValue
                If TheValue > TheMaxValue Then TheMaxValue = TheValue
            Next
      
      
            If TheMinValue = TheMaxValue Then
                'we have a problem because all Y values are equal. This is going to destroy the 
                'chart scaling along the left hand side.
      
                'The below solution does not seem to work.
                RadChart1.Series(0).PlotArea.YAxis.AutoScale = False
                RadChart1.Series(0).PlotArea.YAxis.MinValue = TheMinValue * 0.95
                RadChart1.Series(0).PlotArea.YAxis.MaxValue = TheMaxValue * 1.05
                RadChart1.Series(0).PlotArea.YAxis.Step = 5
            Else
                RadChart1.Series(0).PlotArea.YAxis.AutoScale = True
            End If
      
        End Sub
    Thank you !
    Paul

  2.
  3. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 03 Oct 2011 Link to this post

    Hi Paul,

    You may use the Properties window to customize the Margins of the YAxis. The sample image attached demonstrates how you can set the Right Margin to 10px for example (PlotArea -> YAxis->Appearance->LabelAppearance->Dimensions). 

    All the best,
    Evgenia
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Paul
    Paul avatar
    8 posts
    Member since:
    Jul 2011

    Posted 03 Oct 2011 Link to this post

    Hello Evgenia,

    Unfortunately, I'm still a bit lost on how you're asking me to change the right margin parameters so that my Y labels will appear. I did experiment with the margin settings as you mentioned, though it was of no help.

    Maybe I did not explain the issue clearly. The chart works perfectly fine and shows all the labels on the Y axis normally. However, sometimes the data set will change and the chart needs to show a perfectly straight horizontal line, when the Y values are all exactly equal. In that particular scenario is when I have trouble getting the Y labels to appear properly. Please see the pic below (equal-values.png). In that pic, along the left side, there is a bottom value, but there is no top value. How do I get the top value to show?

     

    Thanks,

    Paul

  7. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 05 Oct 2011 Link to this post

    Hi Paul,

    I'm sorry for not being very descriptive in my previous post. I understood your requirement and my suggestion was to change the Top Margin of the Y Axis Item Label so that all axis items labels are fully visible. Currently you can't customize TextAppearance of single Axis Item - you should either customize all or none. Please give this code snippet a try and let me know how this works for you:

    <PlotArea>
                   <YAxis>
                       <Appearance>
                           <TextAppearance Dimensions-Margins="7px, 1px, 1px, 1px">
                           </TextAppearance>
                       </Appearance>
                   </YAxis>
               </PlotArea>

    Greetings,
    Evgenia
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. Paul
    Paul avatar
    8 posts
    Member since:
    Jul 2011

    Posted 05 Oct 2011 Link to this post

    Hello Evgenia,

    I tried your suggestion out and unfortunately there has been no change. I've attached the code below. Maybe I have something else set that is overriding the necessary margin settings.
    <telerik:RadChart ID="RadChart1" runat="server" DataSourceID="SqlDataSource1" AutoLayout="true" 
    DefaultType="Line" Width="900px" Height="400px" Skin="Vista" OnItemDataBound="RadChart1_ItemDataBound">
          
        <Appearance Corners="Round, Round, Round, Round, 7">
            <FillStyle FillType="ComplexGradient">
                <FillSettings>
                    <ComplexGradient>
                        <telerik:GradientElement Color="243, 253, 255"></telerik:GradientElement>
                        <telerik:GradientElement Color="White" Position="0.5"></telerik:GradientElement>
                        <telerik:GradientElement Color="243, 253, 255" Position="1"></telerik:GradientElement>
                    </ComplexGradient>
                </FillSettings>
            </FillStyle>
      
            <Border Color="212, 221, 222"></Border>
        </Appearance>
             
        <Series>
            <%--DataXColumn is the horizontal database value (Dates in this case)--%>
            <%--DataYColumn is the vertical database value (Perc_Online in this case)--%>
            <telerik:ChartSeries Name="Series1" Type="Line" 
            DataXColumn="Float_TStamp" DataYColumn="Perc_Online" >
              
                <%--Do not show the labels above each marker value--%>
                <Appearance ShowLabels="False">
      
                    <%--Marker properties--%>
                    <FillStyle MainColor="186, 207, 141" SecondColor="146, 176, 83">
                        <FillSettings GradientMode="Vertical">
                            <ComplexGradient>
                                <telerik:GradientElement Color="213, 247, 255" />
                                <telerik:GradientElement Color="193, 239, 252" Position="0.5" />
                                <telerik:GradientElement Color="157, 217, 238" Position="1" />
                            </ComplexGradient>
                        </FillSettings>
                    </FillStyle>
      
                    <PointMark Visible="True" Border-Width="2" Border-Color="DarkKhaki"
                     Dimensions-AutoSize="false" Dimensions-Height="6px" Dimensions-Width="6px">
                    </PointMark>
                      
                    <%--Size of the horizontal series line inside the chart--%>
                    <LineSeriesAppearance Width="2" />
                    <TextAppearance TextProperties-Color="89, 89, 89" />
                </Appearance>
            </telerik:ChartSeries>
        </Series>
      
        <PlotArea>
            <%--Always specify IsZeroBased="False" or the values begin at 0--%>
            <XAxis IsZeroBased="false" LabelStep="1" LayoutMode="Normal">
              
                <%--Format the X (horizontal) labels at the bottom of the chart to ShortDate--%>
                <Appearance ValueFormat="ShortDate">
                    <MajorGridLines Width="0" Color="196, 196, 196" />
                    <TextAppearance TextProperties-Color="89, 89, 89" />
                </Appearance>
                  
                <AxisLabel>
                    <Appearance Dimensions-Paddings="1px, 1px, 10%, 1px" />
                    <TextBlock>
                        <Appearance TextProperties-Font="Verdana, 9.75pt, style=Bold" />
                    </TextBlock>
                </AxisLabel>
            </XAxis>
              
      
      
            <%--Always specify IsZeroBased="False" or the values begin at 0 and autoscale won't work--%>
            <YAxis AutoScale="true" IsZeroBased="false">     
                <%--Format the Y (vertical) labels at the left of the chart to %--%>
                <Appearance MajorTick-Visible="True" MinorTick-Visible="True" ValueFormat="Percent">
                    <MajorGridLines Color="196, 196, 196" />
                    <MinorGridLines Width="0" Color="196, 196, 196" />
      
                    <%--Format the Left axis labels so that they all fit on the page - needed when we have
                    all equal values in the chart and the chart shows a straight horizontal line--%>
                    <TextAppearance Dimensions-Margins="7px, 1px, 1px, 1px" 
                    TextProperties-Font="Verdana, 9.75pt, style=Bold" /> 
                </Appearance>  
            </YAxis>
      
            <Appearance Corners="Round, Round, Round, Round, 6">
                <FillStyle MainColor="White" FillType="Solid" />
                <Border Color="WhiteSmoke" />
            </Appearance>
        </PlotArea>
      
        <ChartTitle>
            <Appearance Position-AlignedPosition="Top" />
              
            <TextBlock Text="% Online History">
                <Appearance TextProperties-Font="Verdana, 11.25pt, style=Bold" >
                </Appearance>
            </TextBlock>
        </ChartTitle>
      
        <%--Turn off the legend--%>
        <Legend Visible="false" >
            <Appearance Visible="False" Dimensions-Margins="1px, 1%, 10%, 1px">
                <ItemTextAppearance TextProperties-Color="86, 88, 89" />
                <ItemMarkerAppearance Figure="Rectangle" />
                <FillStyle MainColor="" />
                <Border Color="" />
            </Appearance>
      
            <TextBlock>
                <Appearance TextProperties-Color="86, 88, 89" Position-AlignedPosition="Top" />
            </TextBlock>
        </Legend>
      
    </telerik:RadChart>

    Also as a separate issue, the designer keeps re-aligning my code and adding extra settings. I keep deleting them to make the code clean and easy to read, yet it continues to do it's own thing. Any way to prevent those automatic changes to my code?

    Thank you,
    Paul
  11. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 10 Oct 2011 Link to this post

    Hello Paul,

    Since you are using a Skin different than the Default one you should set the SkinsOverrideStyles propery of the Chart to false so that the customizations you are making will take effect.
    Let me know how this worked for you and if not - please open a formal Support thread and send us a stripped down runable version of your solution. We will be able to investigate it locally and get back to you with our findings.

    All the best,
    Evgenia
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top