PanZoomBars missing when chart built from code

11 posts, 0 answers
  1. Craig
    Craig avatar
    10 posts
    Member since:
    Mar 2012

    Posted 27 Mar 2012 Link to this post

    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





  2. Nikolay
    Admin
    Nikolay avatar
    386 posts

    Posted 30 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Craig
    Craig avatar
    10 posts
    Member since:
    Mar 2012

    Posted 30 Mar 2012 Link to this post

    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);
            }
     
        }
    }

  5. Nikolay
    Admin
    Nikolay avatar
    386 posts

    Posted 04 Apr 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Craig
    Craig avatar
    10 posts
    Member since:
    Mar 2012

    Posted 04 Apr 2012 Link to this post

    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);
            }
     
     
        }
    }

  7. Terry
    Terry avatar
    13 posts
    Member since:
    Nov 2010

    Posted 04 Apr 2012 Link to this post

    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?
  8. Nikolay
    Admin
    Nikolay avatar
    386 posts

    Posted 06 Apr 2012 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  9. Jinyan
    Jinyan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 09 Aug 2012 Link to this post

    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
  10. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 13 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  11. Jinyan
    Jinyan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 13 Aug 2012 Link to this post

    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
  12. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 16 Aug 2012 Link to this post

    Hi Jin,

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

    Best regards,
    Ves
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready