PlotMode vs zoom

4 posts, 0 answers
  1. Charly
    Charly avatar
    9 posts
    Member since:
    Sep 2011

    Posted 08 Mar 2012 Link to this post

    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).
  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 13 Mar 2012 Link to this post

    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
    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. Charly
    Charly avatar
    9 posts
    Member since:
    Sep 2011

    Posted 13 Mar 2012 Link to this post

    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"
            Title="MainWindow"
            Height="300"
            Width="300"
     
            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));
                }
            }
        }


  5. Nikolay
    Admin
    Nikolay avatar
    386 posts

    Posted 14 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top