Zoom cutting off Chart Lines

[Enal]

Hello - 

We have a problem with zooming and interpolation between pointmarks. We would expect the line to fill the entire chart but observe that it is cut off and does not connect to points beyond the visible section.

Attached is an example screen shot. You see the blue cut-off line drawn by the chart component between two pointmarks, which are circled blue. I have drawn the expected line with a yellow marker.

Is there a setting to extend the line beyond visible pointmarks?

Thanks!

[Peshito]

Hi,

I tried to reproduce your issue but I could not. This is why I have attached a sample project demonstrating a scenario similar to yours. Please take a look at it. If it does not help you, could you reproduce your issue in the attached sample, or upload a runnable copy of yours demonstrating the problem, so we could provide you with appropriate solution.

You could also take a look at our zooming and scrolling help topic here as it might also help you.

Kind regards,
Peshito
the Telerik team

[Enal]

Hi Peshito - 

Please find the attached control demonstrating the issue.
Drag a zoom-area for example across points 9 and 10. You will see that the line will not extend beyond the PointMarks.

(turns out I cannot attach a zip. below is the inline code)

Thanks!

XAML:

<UserControl x:Class="Debug.View.DebugChartZoom2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>


        <telerik:RadChart Grid.Row="0" Name="Chart" >
            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView>
                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend Name="Legend" Header="Legend" UseAutoGeneratedItems="True"/>
                    </telerik:ChartDefaultView.ChartLegend>
                    <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea LegendName="Legend" SmartLabelsEnabled="True">
                            <telerik:ChartArea.AxisX>
                                <telerik:AxisX AutoRange="False" LabelRotationAngle="20" LayoutMode="Normal" MajorGridLinesVisibility="Visible" />
                            </telerik:ChartArea.AxisX>
                            <telerik:ChartArea.AxisY>
                                <telerik:AxisY AutoRange="False" />
                            </telerik:ChartArea.AxisY>
                            <telerik:ChartArea.ZoomScrollSettingsX>
                                <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom" MinZoomRange="0.01" />
                            </telerik:ChartArea.ZoomScrollSettingsX>
                            <telerik:ChartArea.ZoomScrollSettingsY>
                                <telerik:ZoomScrollSettings ScrollMode="None" MinZoomRange="0.01" />
                            </telerik:ChartArea.ZoomScrollSettingsY>
                        </telerik:ChartArea>
                    </telerik:ChartDefaultView.ChartArea>
                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>
        </telerik:RadChart>

        <telerik:RadButton Grid.Row="1" Click="ResetButton_Click" Content="Reset" />

    </Grid>
</UserControl>

CodeBehind:

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;
using Telerik.Windows.Controls.Charting;

namespace Debug.View
{
    public partial class DebugChartZoom2
    {
        ObservableCollection<DebugChartZoomData2> aData;

        public DebugChartZoom2()
        {
            InitializeComponent();
            Init();
            Loaded += DebugChart_Loaded;
        }

        private void Init(){
            aData = new ObservableCollection<DebugChartZoomData2>();
            const int imax = 20;
            for (var i=0; i < imax; i++)
            {
                var aPoint = new DebugChartZoomData2 { X = i, Y = i };
                aData.Add(aPoint);
            }
        }

        private ChartArea ChartArea { get { return (Chart.DefaultView.ChartArea); } }

        void DebugChart_Loaded(object sender, RoutedEventArgs e)
        {
            var sampleData = new List<ObservableCollection<DebugChartZoomData2>> { aData };
            Chart.ItemsSource = sampleData;

            var xmin = aData.Min(d => d.X);
            var xmax = aData.Max(d => d.X);
            var ymin = aData.Min(d => d.Y);
            var ymax = aData.Max(d => d.Y);
            ChartArea.AxisX.MinValue = xmin;
            ChartArea.AxisX.MaxValue = xmax;
            ChartArea.AxisY.MinValue = ymin;
            ChartArea.AxisY.MaxValue = ymax;

            var aMapping = CreateSeriesMapping("A", 0);
            Chart.SeriesMappings.Add(aMapping);
        }

        private SeriesMapping CreateSeriesMapping(string _label, int _index)
        {
            var smapping = new SeriesMapping { CollectionIndex = _index, LegendLabel = _label, SeriesDefinition = new LineSeriesDefinition() };
            smapping.ItemMappings.Add
                (new ItemMapping { DataPointMember = DataPointMember.XValue, FieldName = "X", FieldType = typeof(double) });
            smapping.ItemMappings.Add
                (new ItemMapping { DataPointMember = DataPointMember.YValue, FieldName = "Y", FieldType = typeof(double) });
            return (smapping);
        }

        private void ResetButton_Click(object sender_, RoutedEventArgs routedEventArgs){
            ChartArea.ZoomScrollSettingsX.RangeStart = 0;
            ChartArea.ZoomScrollSettingsX.RangeEnd = 1;
        }

    }

    public class DebugChartZoomData2
    {
        public double X { get; set; }
        public double Y { get; set; }
    }
}

[Peshito]

Hello Enal,

Thank you for providing your sample code.

The reason for your behavior is because of the AutoRange property. When AutoRange is set to false, the axis will respect the MinValue, MaxValue and Step strictly, but only items which appear within the desired range are shown, while the axis range appears as specified. Setting the AutoRange to true, makes the chart behave as you would expect it to and the line will be drawn from the beginning of the axis to its end. You should also note that when you make a selection the charts shows the points that are inside the selection.

Hope this information helps.

Regards,
Peshito
the Telerik team

[Enal]

Hi Peshito -

May I draw your attention to the following RadChart thread:
http://www.telerik.com/community/forums/silverlight/chart/bug-in-chart-zoom-with-sample-code.aspx 

To fix this situation we were advised to turn OFF AutoRange. It would appear we arrived at an impasse :-)

From a perspective of expected behavior the issue of the current thread (cutting off chart lines) is worse for us. Why would a user want to see only a limited segment of the line when zooming in? The continuous line gives important information about the 'trend' of the graph. This seems to be a limitation of the chart code (I can see when AutoRange = True, it actually selects the outermost points and makes them the zoom boundaries, hence I assume the chart expects to have 'real' points at the boundary).

I suppose a workaround would be to identify the outermost 'real' points ourselves and calculate zoom parameters accordingly but it starts to become tedious to use the control and I'd much rather just have it work out of the box ;-)

Thanks!

[Peshito]

Hello,

Thank you for your detailed feedback. Our developers are aware of this limitation however its fix includes major changes in the mechanism the zooming functionality works. Being aware of that, we have implemented newly improved mechanism of zooming in the new ChartView control. It is now in beta but it will be officially released in a couple of days. You may also find demo examples of the new chart here.

Regards,
Peshito
the Telerik team

[Enal]

Ok, thanks. Demos look nice, but not really what we hoped to hear, since we spent significant effort customizing RadChart already. We'll have to assess the effort to migrate to the new control. Thanks.