PlotMode vs zoom

[Charly]

Hi,

is it a known bug when DateTimeContinuousAxis PlotMode is set to OnTicksPadded, when the chart is zoomed, the XAxis drifted depending on the zoom value? It works fine when PlotMode is set to OnTicks, but there's no padding with the chart border (that;s why I need OnTicksPadded).

Please see the latest picture.(the first picture, wpf_radchartview_plotmode_zoom_1.png, 
 doesn't show the problem clearly).

[Vladimir Milev]

Hello,

Thank you for your report. We were not aware of this issue. Can you please help us reproduce this? Can you send us your code so our developers can track down and isolate the problem?

Thank you very much in advance.

All the best,
Vladimir Milev
the Telerik team

[Charly]

Hi,

How do I attach VS project?

WPF Telerik version:
2012.1.215.40

MVVM Light toolkit:
3.0.0.29165

How to reproduce:
1. Set PlotMode to OnTicksPadded
2. Zoom to the first datapoint.
3. Observe date on trackball info and on X Axis and check if both are in-sync.

Another problem:
Distance from chart border to the first data point is very large when zoom value is high. 
This distance should not change regardless of zoom value.

MainWindow.xaml

<Window x:Class="TelerikWPFChartViewZoomBug.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="300"
        Width="300"

        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
    xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"


        DataContext="{Binding Main, Source={StaticResource Locator}}">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">

      <chart:ChartDataSource x:Name="ChartDataSource1"
                                     ItemsSource="{Binding Readings}"
                                     SamplingUnit="Minute" />

      <chart:RadCartesianChart x:Name="PART_ChartArea"
                               Grid.Row="1"
                               Grid.Column="1" >
        <chart:RadCartesianChart.Resources>
          <DataTemplate x:Key="LabelTemplate">
            <StackPanel  Orientation="Vertical">
              <Border Background="Pink"
                      Padding="2,0,2,0">
                <TextBlock Text="{Binding StringFormat=\{0:N0\}}"
                           HorizontalAlignment="Center"
                           Foreground="White"/>
              </Border>
            </StackPanel>
          </DataTemplate>

          <DataTemplate x:Key="PointTemplate">
            <StackPanel  Orientation="Vertical" >
              <Ellipse
                Height="8"
                Width="8"
                Stroke="Pink"
                Fill="White">
              </Ellipse>
            </StackPanel>
          </DataTemplate>

        </chart:RadCartesianChart.Resources>



        <chart:RadCartesianChart.Behaviors>
          <chartView:ChartPanAndZoomBehavior ZoomMode="Horizontal"
                                             PanMode="Horizontal"/>
          <!--
                            <chartView:ChartTooltipBehavior   />
                            -->

          <chartView:ChartTrackBallBehavior ShowTrackInfo="True"
                                            ShowIntersectionPoints="True"/>
        </chart:RadCartesianChart.Behaviors>

        <telerik:RadCartesianChart.TooltipTemplate>
          <DataTemplate>
            <Border Background="White"
                    BorderBrush="Black"
                    BorderThickness="1"
                    Padding="5"
                    CornerRadius="3">
              <StackPanel Orientation="Vertical">
                <TextBlock>
                  <Run Text="Timestamp: "/>
                  <Run Text="{Binding Category, StringFormat=\{0:dd-MMM-yy hh:mm tt\}}"/>
                </TextBlock>
                <TextBlock>
                  <Run Text="SpO2: "/>
                  <Run Text="{Binding DataItem.SpO2, StringFormat=\{0:N0\}}"/>
                  <Run Text="%"/>
                </TextBlock>

              </StackPanel>
            </Border>
          </DataTemplate>
        </telerik:RadCartesianChart.TooltipTemplate>



        <chart:RadCartesianChart.HorizontalAxis>
          <chartView:DateTimeContinuousAxis
            LabelFormat="dd-MMM HH:mm"
            LabelFitMode="MultiLine"
            LabelInterval="2" PlotMode="OnTicksPadded">

            <telerik:DateTimeContinuousAxis.PanZoomBarStyle>
              <Style TargetType="telerik:PanZoomBar">
                <Setter Property="Height"
                        Value="30" />
              </Style>
            </telerik:DateTimeContinuousAxis.PanZoomBarStyle>

          </chartView:DateTimeContinuousAxis>
        </chart:RadCartesianChart.HorizontalAxis>

        <chart:RadCartesianChart.VerticalAxis>
          <chartView:LinearAxis Minimum="50" Maximum="110"/>
        </chart:RadCartesianChart.VerticalAxis>

        <chart:RadCartesianChart.Series>
          <chartView:LineSeries x:Name="LineSeries1"
                                Stroke="Pink"
                                StrokeThickness="2"
                                ShowLabels="True"
                                CategoryBinding="Timestamp"
                                ValueBinding="SpO2"

                                ItemsSource="{Binding ElementName=ChartDataSource1}"
                                PointTemplate="{StaticResource PointTemplate}">

            <chartView:LineSeries.LabelDefinitions>
              <telerik:ChartSeriesLabelDefinition Template="{StaticResource LabelTemplate}"
                                                  Margin="20,0,0,0">
              </telerik:ChartSeriesLabelDefinition>
            </chartView:LineSeries.LabelDefinitions>

            <chartView:LineSeries.TrackBallInfoTemplate >
              <DataTemplate>
                <StackPanel Orientation="Vertical">
                  <TextBlock>
                    <Run Text="Timestamp: "/>
                    <Run Text="{Binding DataPoint.Category, StringFormat=\{0:dd-MMM-yy hh:mm tt\}}"/>
                  </TextBlock>
                  <TextBlock>
                    <Run Text="SpO2: "/>
                    <Run Text="{Binding DataPoint.Value, StringFormat=\{0:N0\}}"/>
                    <Run Text="%"/>
                  </TextBlock>

                </StackPanel>
              </DataTemplate>
            </chartView:LineSeries.TrackBallInfoTemplate>
          </chartView:LineSeries>
        </chart:RadCartesianChart.Series>
      </chart:RadCartesianChart>

    </Grid>
</Window>

MainViewMmodel.cs

public class MainViewModel : ViewModelBase
   {
       public ObservableCollection<Model.SpO2Reading> Readings { get; set; }


       /// <summary>
       /// Initializes a new instance of the MainViewModel class.
       /// </summary>
       public MainViewModel()
       {
           if (IsInDesignMode)
           {
               // Code runs in Blend --> create design time data.
           }
           else
           {
               // Code runs "for real"

               Readings = new ObservableCollection<SpO2Reading>();

               for (int i = 0; i < 200; i++)
               {
                   var rand = new Random(DateTime.Now.Millisecond * i);
                   var reading = new Model.SpO2Reading();
                   reading.SpO2 = 80 + Math.Abs((i * rand.Next()) % 20);

                   reading.Timestamp = DateTime.Now.AddHours(10 * i).AddMinutes(13 * i);

                   reading.Unit = "%";

                   Readings.Add(reading);
               }
           }
       }

   }

SpO2Reading.cs

public class SpO2Reading : INotifyPropertyChanged
    {
        private string _unit;

        public string Unit
        {
            get { return _unit; }
            set { _unit = value; NotifyPropertyChanged("Unit"); }
        }

        private int _spO2;

        public int SpO2
        {
            get { return _spO2; }
            set { _spO2 = value; NotifyPropertyChanged("SpO2"); }
        }

        private DateTime _timestamp;

        public DateTime Timestamp
        {
            get { return _timestamp; }
            set { _timestamp = value; NotifyPropertyChanged("Timestamp"); }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

[Nikolay]

Hi Charly,

You can attach a whole zipped project by opening a support ticket. It would be very helpful for us if you're able to do that, as there seem to be a few things missing from the pasted code snippets and the project is not runnable.

Kind regards,
Nikolay
the Telerik team