This is a migrated thread and some comments may be shown as answers.

Bug in Chart Zoom (with sample code)

7 Answers 139 Views

Chart

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Enal asked on 07 Nov 2011, 09:50 PM

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 :-)

7 Answers, 1 is accepted

answered on 07 Nov 2011, 10:01 PM

zoom-bug.PNG

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.

answered on 10 Nov 2011, 05:59 PM

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!