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

PlotMode vs zoom

3 Answers 116 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Charly
Top achievements
Rank 1
Charly asked on 08 Mar 2012, 04:51 PM
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).

3 Answers, 1 is accepted

Sort by
0
Vladimir Milev
Telerik team
answered on 13 Mar 2012, 10:33 AM
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 >>
0
Charly
Top achievements
Rank 1
answered on 13 Mar 2012, 01:16 PM
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));
            }
        }
    }


0
Nikolay
Telerik team
answered on 14 Mar 2012, 09:39 AM
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 >>
Tags
ChartView
Asked by
Charly
Top achievements
Rank 1
Answers by
Vladimir Milev
Telerik team
Charly
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or