Bug in Chart Zoom (with sample code)

[Enal]

Hi - 

We found a bug in the Chart component. Essentially when drawing 2 series and one of them spans the entire x-axis, while the other only starts in, say..., the middle of the x-axis. Now, when zooming the second half of the x-axis (which visibly contains both series), the new zoomed area again only shows 1/2 the second series - also clearly showing labels starting long after the actual data.

To make it clearer I extracted a stand alone sample, which follows (some of this may look weird, which is due to stripping down a more involved implementation to the bare minimum...).

Here is the XAML:

<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">
                        <telerik:ChartArea.AxisX>
                            <telerik:AxisX AutoRange="True" LabelRotationAngle="20" LayoutMode="Normal" MajorGridLinesVisibility="Visible" />
                        </telerik:ChartArea.AxisX>
                        <telerik:ChartArea.AxisY>
                            <telerik:AxisY AutoRange="True" />
                        </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>

And this is the corresponding code behind:

public partial class DebugChart
{
    ObservableCollection<DebugChartData> aData;
    ObservableCollection<DebugChartData> bData;

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

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

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

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

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

    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 DebugChartData{
    public double X { get; set; }
    public double Y { get; set; }
}

 Please stick this into a real control, such as a RadWindow and fire it up. You will see 2 offset lines with labels. 'A' is starting at zero and 'B' is starting at 10. Now zoom in by selecting x-range [10..20]. Now both A and B should fill the entire chart. However, B now incorrectly starts at 15 - still in the middle of the x-axis.

Please fix asap, our clients / users are complaining :-)

[Enal]

Wow, this gets even worse when zooming in further (see the attached pic).

Even the line A, which should be continuous throughout is now broken off, and line B only shows 1 point at x=20. Both lines should be parallel and unbroken throughout this view.

[Evgenia]

Hello Enal,

Manually setting the X axis range to a custom one should make this issue go away. For example:

<telerik:ChartArea.AxisX>
              <telerik:AxisX AutoRange="False" MinValue="0" MaxValue="20" Step="1"
                                       LabelRotationAngle="20" LayoutMode="Normal" MajorGridLinesVisibility="Visible" />
</telerik:ChartArea.AxisX>

Best wishes,
Evgenia
the Telerik team

[Enal]

Evgenia - thanks, this workaround seems to fix the issue in my sample.

Lines display as expected when setting AutoRange=False and min and max values with the following code in DebugChart_Loaded(...) below.

var xmin = Math.Min(aData.Min(x => x.X), bData.Min(x => x.X));
var xmax = Math.Max(aData.Max(x => x.X), bData.Max(x => x.X));
ChartArea.AxisX.MinValue = xmin;
ChartArea.AxisX.MaxValue = xmax;

In the real app this will be a little more involved, since things are more dynamic.

Is this a temporary workaround and you guys are going to address it, or is this an unavoidable characteristic of the RadChart component?

Thanks!

[Evgenia]

Hello Enal,

I am afraid this is related to the way zoom/scroll is currently implemented. Our developers are already aware of this behavior and they will research the possibilities to fix it. For the time being I can suggest that you use the provided workaround. Please, accept our apologies for the inconvenience caused.

Regards,
Evgenia
the Telerik team

[Enal]

Hi Evgenia -

Ok. For prioritization, please note that the workaround only partially works - for example only partial lines are displayed when zooming in further and weird artifacts may occur.

For the time being our users can live with it (especially, since we can blame you guys :-) but please advise your developers to test the fix thoroughly - also with multiple series that have partial data sets (one starts/ends in the middle of the other etc.) and other boundary conditions with complex backing data.

Thanks!

[nadav]

I'm having the same issues regarding the data series not being displayed well.
I believe the zooming is affecting each series on its own.

i.e
Line Series 1:  from 0 to 100
Line Series 2: from 60 to 100

after 50% zoom
Line Series 1: from 25 to 75
Line Series 2: from 70 to 80 (will only show up to 75 due to first series)


I'm not 100% this is the case, but it sure seem like it.

[Evgenia]

Hello nadav,

I tested your scenario and I should admit that your issue is the same. To workaround it, please set the AutoRange property of AxisX to false and provide your own range and step:

<telerik:ChartArea.AxisX>
                                <telerik:AxisX AutoRange="False" MinValue="0" MaxValue="100" Step="10"  ></telerik:AxisX>
</telerik:ChartArea.AxisX>

Hope this is applicable.

All the best,
Evgenia
the Telerik team