Bug in Chart Zoom (with sample code)

8 posts, 0 answers
  1. Enal
    Enal avatar
    39 posts
    Member since:
    Oct 2011

    Posted 07 Nov 2011 Link to this post

    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 :-)
  2. Enal
    Enal avatar
    39 posts
    Member since:
    Oct 2011

    Posted 07 Nov 2011 Link to this post

    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.
  3. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 10 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  4. Enal
    Enal avatar
    39 posts
    Member since:
    Oct 2011

    Posted 10 Nov 2011 Link to this post

    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!
  5. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 15 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Enal
    Enal avatar
    39 posts
    Member since:
    Oct 2011

    Posted 15 Nov 2011 Link to this post

    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!
  7. nadav
    nadav avatar
    1 posts
    Member since:
    Oct 2010

    Posted 25 Dec 2011 Link to this post

    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.
  8. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 28 Dec 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top