[Solved] Scaling when all series values are equal

[Paul]

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

[Evgenia]

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

[Paul]

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

[Evgenia]

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

[Paul]

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

[Evgenia]

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