PanZoomBars missing when chart built from code

[Craig]

I am building multi-axes line graphs using the RADCartesianChart control.
If I fill in the control using XAML, I get PanZoomBars as expected.  See sample XAML below

<UserControl x:Class="TestTelerik.ChartViewUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:TestTelerik="clr-namespace:TestTelerik"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
<TestTelerik:ViewModel/>
</UserControl.DataContext>
<Grid>
<telerik:RadCartesianChart Name="Chart" Zoom="{Binding Path=Zoom, Mode=TwoWay}" PanOffset="{Binding Path=PanOffset, Mode=TwoWay}">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:LinearAxis Name="Time" Title="Time (sec)"/>
</telerik:RadCartesianChart.HorizontalAxis>


<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Name="Speed" Title="Speed (km/h)"/>
</telerik:RadCartesianChart.VerticalAxis>


<telerik:RadCartesianChart.Behaviors>
<telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"/>
<telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="False"/>
</telerik:RadCartesianChart.Behaviors>

<telerik:ScatterLineSeries ItemsSource="{Binding Data}" YValueBinding="vCar" XValueBinding="Time" Stroke="Black" DisplayName="vCar"/>
<telerik:ScatterLineSeries ItemsSource="{Binding Data}" YValueBinding="sLap" XValueBinding="Time" Stroke="Blue">
<telerik:ScatterLineSeries.VerticalAxis>
<telerik:LinearAxis Name="sLap" Title="Distance (m)"/>
</telerik:ScatterLineSeries.VerticalAxis>
</telerik:ScatterLineSeries>
<telerik:ScatterLineSeries ItemsSource="{Binding Data}" YValueBinding="ETyreTotalFL" XValueBinding="Time" Stroke="Red">
<telerik:ScatterLineSeries.VerticalAxis>
<telerik:LinearAxis Name="ETyreTotalFL" Title="Energy (kJ)"/>
</telerik:ScatterLineSeries.VerticalAxis>
</telerik:ScatterLineSeries>


<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="XY"  />
</telerik:RadCartesianChart.Grid>


</telerik:RadCartesianChart>
</Grid>
</UserControl>

If I attempt the same thing in code, then the graphs appear correctly, but the PanZoomBars are missing! 
Code extract from a user control code behind file showing how I am filling in the control is shown below  (NOTE chart is a RadCartesianChart control specified in XAML of the UserControl).  

private void UpdateFromCollection()
{
if ((XAxes != null) && XAxes.Any() && (YAxes != null) && YAxes.Any())
{
var xAxis = XAxes.First();
this.Chart.HorizontalAxis = new LinearAxis
                            {Name = xAxis.Name, Title = string.Format("{0} ({1})", xAxis.Name, xAxis.Units)};


this.Chart.Behaviors.Clear();
var panAndZoomBehavior = new ChartPanAndZoomBehavior();
panAndZoomBehavior.ZoomMode = ChartPanZoomMode.Both;
panAndZoomBehavior.PanMode = ChartPanZoomMode.Both;
this.Chart.Behaviors.Add(panAndZoomBehavior);


var trackBallBehaviour = new ChartTrackBallBehavior();
trackBallBehaviour.ShowIntersectionPoints = true;
trackBallBehaviour.ShowTrackInfo = false;
this.Chart.Behaviors.Add(trackBallBehaviour);


this.Chart.Series.Clear();
bool firstYAxis = true;
foreach (var yAxis in YAxes)
{
var scatterLineSeries = new ScatterLineSeries {DisplayName = yAxis.Name};
scatterLineSeries.Stroke = new SolidColorBrush(yAxis.Colour);

for (var i = 0; i < xAxis.Data.Count; i++)
{
var sp = new ScatterDataPoint { XValue = xAxis.Data[i], YValue = yAxis.Data[i] };
scatterLineSeries.DataPoints.Add(sp);
}
if (firstYAxis)
{
this.Chart.VerticalAxis = new LinearAxis() { Name = yAxis.Name, Title = string.Format("{0} ({1})", yAxis.Name, yAxis.Units) };
firstYAxis = false;
}
else
{
scatterLineSeries.VerticalAxis = new LinearAxis() { Name = yAxis.Name, Title = string.Format("{0} ({1})", yAxis.Name, yAxis.Units) };
}
this.Chart.Series.Add(scatterLineSeries);
}
}
}


Is there something else I have to specify in order to get the PanZoomBars included?

Regards
Craig Littlewood

[Nikolay]

Hi Craig,

The PanZoomBars appear only for the primary axis. Please, find attached a simple test application, which demonstrates a similar scenario and works as expected on our side. In case the issue persists, it would be very helpful if you're able to modify the application adn send it back to us to review further.

All the best,
Nikolay
the Telerik team

[Craig]

Hello Nicolay

I have not got Silverlight installed, so was unable to load and run your test project.  However, I took the code and used it in a test WPF project, and it does not display Pan and Zoom bars as previously reported.  Perhaps this is a bug in the WPF version only.

I would attach my project, but am unable via this forum.  However, you can easily reproduce by creating a WPF application, adding your Data.cs to the project, and then using the code below for MainWindow.xaml and MainWindows.xaml.cs.

Regards
Craig

MainWindows.xaml

<Window x:Class="TestTelerikPanZoom.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadCartesianChart Name="RadChart1" Palette="Natural" Zoom="3,1">
            <!--<telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis Title="Linear"/>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeCategoricalAxis Title="DateTimeCategorical" DateTimeComponent="Month"/>
            </telerik:RadCartesianChart.HorizontalAxis>-->
        </telerik:RadCartesianChart>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.ObjectModel;
using System.Windows;
using CodeBehind_PanZoom;
using Telerik.Windows.Controls.ChartView;

namespace TestTelerikPanZoom
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ObservableCollection<Data> line1;
        public ObservableCollection<Data> Line1
        {
            get { return line1; }
            set { line1 = value; }
        }

        public MainWindow()
        {
            InitializeComponent();

            Line1 = new ObservableCollection<Data>();

            for (int i = 0; i < 35; i++)
            {
                Line1.Add(new Data(DateTime.Now.AddDays(i), i));
            }

            this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            LineSeries lineSeries1 = new LineSeries();

            lineSeries1.CategoryBinding = new PropertyNameDataPointBinding("Time");
            lineSeries1.ValueBinding = new PropertyNameDataPointBinding("Value");
            lineSeries1.ItemsSource = Line1;

            RadChart1.Series.Add(lineSeries1);

            RadChart1.VerticalAxis = new LinearAxis() { Title = "Linear" };
            RadChart1.HorizontalAxis = new DateTimeCategoricalAxis() { Title = "DateTimeCategorical" };
            RadChart1.HorizontalAxis.LabelFormat = "dd/MM";
            RadChart1.Behaviors.Add(new ChartPanAndZoomBehavior() { ZoomMode = ChartPanZoomMode.Both, PanMode = ChartPanZoomMode.Both });
            RadChart1.PanOffset = new Point(-1500, 0);
        }

    }
}

[Nikolay]

Hello Craig,

This is a note to let you know we have been able to reproduce the issue you've described and you are correct that it is WPF specific. Our developers have already been notified and a fix will be provided with one of the future versions of the control.

Your Telerik points have been updated for the feedback.

Regards,
Nikolay
the Telerik team

[Craig]

Hello Nicolay

Thanks for the response.

Can I report a related issue to be considered at the same time as this bug.  Basically, the Zoom gets confused if you reset it from code.
I have reproduced this using the sample code you provided.  Updated MainWindow.xaml.cs is below.
I have updated the code to reset Zoom on Mouse right-click.  If you zoom a section of the chart, the 1st time it works great.  However, if you "Reset Zoom" with Right Mouse click, and Zoom the same section, it locates a different part of the chart.
In my application, I have charts built with XAML (where PanAndZoomBar works) where this behaviour is not present.  It only happens for charts built from code.

Regards
Craig

MainWindow.xaml.cs

using System;
using System.Collections.ObjectModel;
using System.Windows;
using CodeBehind_PanZoom;
using Telerik.Windows.Controls.ChartView;

namespace TestTelerikPanZoom
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ObservableCollection<Data> line1;
        public ObservableCollection<Data> Line1
        {
            get { return line1; }
            set { line1 = value; }
        }

        public MainWindow()
        {
            InitializeComponent();

            Line1 = new ObservableCollection<Data>();

            for (int i = 0; i < 35; i++)
            {
                Line1.Add(new Data(DateTime.Now.AddDays(i), i));
            }

            this.Loaded += new RoutedEventHandler(MainWindow_Loaded);

            RadChart1.MouseRightButtonDown += Chart_MouseRightButtonDown;

        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            LineSeries lineSeries1 = new LineSeries();

            lineSeries1.CategoryBinding = new PropertyNameDataPointBinding("Time");
            lineSeries1.ValueBinding = new PropertyNameDataPointBinding("Value");
            lineSeries1.ItemsSource = Line1;

            RadChart1.Series.Add(lineSeries1);

            RadChart1.VerticalAxis = new LinearAxis() { Title = "Linear" };
            RadChart1.HorizontalAxis = new DateTimeCategoricalAxis() { Title = "DateTimeCategorical" };
            RadChart1.HorizontalAxis.LabelFormat = "dd/MM";
            RadChart1.Behaviors.Add(new ChartPanAndZoomBehavior() { ZoomMode = ChartPanZoomMode.Both, PanMode = ChartPanZoomMode.Both });
        }

        private void Chart_MouseRightButtonDown(object sender, System.Windows.Input.MouseEventArgs e)
        {
            RadChart1.Zoom = new Size(3, 1);
            RadChart1.PanOffset = new Point(0, 0);
        }


    }
}

[Terry]

I just ran into the issue with the missing pan and zoom bars today.

Is there a workaround?

Any estimate as to when the fix will be available?

[Nikolay]

Hi Craig, Terry,

Thank you for the provided feedback.

The easiest work-around for the time being would be to create the chart, axes and PanAndZoom behavior in the constructor and not on Loaded event. Then in case you would need to add series you may do it on Loaded or on a button click, however, the axes and PanAndZoom behavior should be added in the constructor.

We cannot commit to a concrete timeframe for the implementation of the fix when it comes to the latest internal build releases, however, it would be fixed for the next major version of the control in Q2.

Kind regards,
Nikolay
the Telerik team

[Jinyan]

I have just come across this issue too. I don't quite understand your work-around for creating all of the behaviors in the constructor. Is there a way to simply change the visibility or enable/disable the panandzoombar?

On a side note, is there a function to reset an existing panandzoombar to its default state (not zoomed)?

Edit: Disregard this post, reposted on another question here: http://www.telerik.com/community/forums/wpf/charting-kit/cannot-programmatically-add-remove-panandzoombehavior.aspx 


Thanks,
Jin

[Ves]

Hi Jin,

Enabling/disabling the pan and zoom bar is effectively done by adding/removing ChartPanAndZoomBehavior. Resetting pan/zoom is done  by setting the PanOffset and Zoom properties of RadCartesianChart. Please, find attached a small example, showing this.


Best regards,
Ves
the Telerik team

[Jinyan]

Hi Ves,

Thanks for the reply. That's the problem I am having. When I do RadChart.Behaviors.Clear() and then RadChart.Behaviors.Add(new ChartPanAndZoomBehavior..), the zoom bars will not show up on the graph. I am running Telerik for WPF 2012 Q1 SP1.

Best,
Jin

[Ves]

Hi Jin,

Please, upgrade to 2012 Q2 or 2012 Q2 SP1 - with these versions this works as expected.

Best regards,
Ves
the Telerik team