Zoom in Zoom out issue with range=manual

[Dipika]

 Hi,
I am using rad telerik line chart in which my x axis is datetime and Y axis is in double format.
I set min max and step value so that it shows correct graph. But when I try to zoom in the graph by scroll/ drag then sometime it shows zoomed value in middle or right or left side portion of chart area. That means it doesnt utilize whole chart area at zoom time.
Also when data point is more and if I try to zoom in by drag, then sometimes databound event is doesnt get fired, after that if I scroll little bit and try to zoom in by drag then its work fine. Can you please help me to find out issue in this?

<UserControl x:Class="Telerik_Graph.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
            xmlns:conv="clr-namespace:Telerik_Graph"
      Height="Auto" Width="Auto"
    mc:Ignorable="d"
    d:DesignHeight="250" d:DesignWidth="250">
    <UserControl.Resources>
        <Style TargetType="telerikCharting:SeriesItemLabel" x:Key="seriesItemLabelStyle">
            <Setter Property="Visibility">
                <Setter.Value>
                    <Binding Path="DataContext">
                        <Binding.RelativeSource>
                            <RelativeSource Mode="Self"/>
                        </Binding.RelativeSource>
                        <Binding.Converter>
                            <conv:VisibilityConvertercs/>
                        </Binding.Converter>
                    </Binding>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0" Visibility="Collapsed">
            <TextBlock Text="Enter Tick Distance = "/>
            <TextBox Background="Yellow" Width="100" Name="txtTick"/>
            <Button Content="OK" Width="100" Click="Button_Click"/>
            <StackPanel Orientation="Vertical">

                <TextBlock Text="Total number of record = 30"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Tick Distance is = " />
                    <TextBlock Name="txtTagdist"  />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Start date: "/>
                    <TextBlock Text="{Binding StartDate}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="End date: "/>
                    <TextBlock Text="{Binding EndDate}"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
        <telerikChart:RadChart  Margin="0 2 0 2"  x:Name="RadChart"  Grid.Row="1" ItemsSource="{Binding ChartsCollection}" UseDefaultLayout="False" BorderBrush="Transparent" >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <telerikCharting:ChartArea Grid.Row="1" Grid.RowSpan="2"  Margin="0 0 5 0"
                                       x:Name="chartArea1"
                                       EnableAnimations="False" LabelFormatBehavior="None"
                                       Padding="5,10,20,10"  NoDataString="{Binding NoDataString}" Background="White" >
                    <telerikCharting:ChartArea.ZoomScrollSettingsX>
                        <telerikCharting:ZoomScrollSettings ScrollMode="ScrollAndZoom" MinZoomRange="0.1" PropertyChanged="ZoomScrollSettings_PropertyChanged_1" />
                    </telerikCharting:ChartArea.ZoomScrollSettingsX>


                    <telerikCharting:ChartArea.AxisY>
                        <telerikCharting:AxisY ExtendDirection="Up" AutoRange="False" MinValue="{Binding Ymin}" MaxValue="{Binding Ymax}" Step="{Binding Ystep}" MajorTicksVisibility="Visible" MinorTicksVisibility="Visible" MinorGridLinesVisibility="Visible" PlotAreaAxisLabelsVisibility="Collapsed" />
                    </telerikCharting:ChartArea.AxisY>
                    <telerikCharting:ChartArea.AxisX>
                        <telerikCharting:AxisX  DefaultLabelFormat="MM-dd-yy H:mm:ss" LabelRotationAngle="0" AutoRange="False" MinValue="{Binding StartDate}" MaxValue="{Binding EndDate}"
                                                Step="{Binding Step}" TicksDistance="20" LayoutMode="Inside" IsDateTime="True">
                        </telerikCharting:AxisX>
                    </telerikCharting:ChartArea.AxisX>
                </telerikCharting:ChartArea>
                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Grid.Row="0">
                    <telerik:RadButton Command="{Binding ZoomInCommand}" Margin="5,0" Content="+" Width="20" FontWeight="Bold"/>
                    <telerik:RadButton Command="{Binding ZoomOutCommand}" Margin="5,0" Content="-" Width="20" FontWeight="Bold"/>
                </StackPanel>

            </Grid>

            <telerikChart:RadChart.SortDescriptors>
                <telerikCharting:ChartSortDescriptor Member="XBinding" SortDirection="Ascending" />
            </telerikChart:RadChart.SortDescriptors>
            <telerikChart:RadChart.SamplingSettings>
                <telerikCharting:SamplingSettings SamplingThreshold="400" SamplingFunction="Average" />
            </telerikChart:RadChart.SamplingSettings>
            <telerikChart:RadChart.SeriesMappings>
                <telerikCharting:SeriesMapping  ChartAreaName="chartArea1">

                    <telerikCharting:SeriesMapping.SeriesDefinition>
                        <telerikCharting:LineSeriesDefinition ShowItemLabels="True" ShowItemToolTips="True" ShowPointMarks="False" SeriesItemLabelStyle="{StaticResource seriesItemLabelStyle}">
                            <telerikCharting:LineSeriesDefinition.Appearance>
                                <telerikCharting:SeriesAppearanceSettings Stroke="RoyalBlue" StrokeThickness="2"/>
                            </telerikCharting:LineSeriesDefinition.Appearance>
                        </telerikCharting:LineSeriesDefinition>
                    </telerikCharting:SeriesMapping.SeriesDefinition>

                    <telerikCharting:SeriesMapping.ItemMappings>
                        <telerikCharting:ItemMapping FieldName="XBinding" DataPointMember="XValue" />
                        <telerikCharting:ItemMapping FieldName="YBinding" DataPointMember="YValue" />
                    </telerikCharting:SeriesMapping.ItemMappings>


                </telerikCharting:SeriesMapping>

            </telerikChart:RadChart.SeriesMappings>

        </telerikChart:RadChart>

    </Grid>
</UserControl>
------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.Charting;

namespace Telerik_Graph
{
    public partial class MainPage : UserControl
    {
        Viewmodel model;
        public MainPage()
        {
            InitializeComponent();

            DataContext = new Viewmodel();

            model = DataContext as Viewmodel;
            RadChart.DataBound += model.ChartDataBound;
            model.ChartArea = chartArea1;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            chartArea1.Tag = txtTick.Text;
            UpdateLayout();
        }



        private void chartArea1_Loaded_1(object sender, RoutedEventArgs e)
        {

        }

        private void AxisX_RangeChanged_1(object sender, EventArgs e)
        {

        }

        private void ZoomScrollSettings_PropertyChanged_1(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {

        }
    }
}
-------------------------------------
ViewMdel :
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using Telerik.Windows.Controls.Charting;

namespace Telerik_Graph
{

    public class Viewmodel : INotifyPropertyChanged
    {
        #region Property
        private ObservableCollection<ChartData> _chartsCollection;
        public ObservableCollection<ChartData> ChartsCollection
        {
            get { return _chartsCollection; }
            set
            {
                if (_chartsCollection == value) return;
                _chartsCollection = value;
                OnPropertyChanged("ChartsCollection");
            }
        }

        private double startDate;
        public double StartDate
        {
            get { return startDate; }
            set
            {
                startDate = value;
                OnPropertyChanged("StartDate");
            }
        }

        private double endDate;
        public double EndDate
        {
            get { return endDate; }
            set
            {
                endDate = value;
                OnPropertyChanged("EndDate");
            }
        }

        private double step;
        public double Step
        {
            get { return step; }
            set
            {
                step = value;
                OnPropertyChanged("Step");
            }
        }

        private double _Ymin;
        public double Ymin
        {
            get { return _Ymin; }
            set
            {
                _Ymin = value;
                OnPropertyChanged("Ymin");
            }
        }
        private double _Ymax;
        public double Ymax
        {
            get { return _Ymax; }
            set
            {
                _Ymax = value;
                OnPropertyChanged("Ymax");
            }
        }

        private double _Ystep;
        public double Ystep
        {
            get { return _Ystep; }
            set
            {
                _Ystep = value;
                OnPropertyChanged("Ystep");
            }
        }
        ICommand zoomInCommand;
        public ICommand ZoomInCommand
        {
            get
            {
                if (zoomInCommand == null)
                {
                    zoomInCommand = new Telerik.Windows.Controls.DelegateCommand(ZoomIn, CanZoomIn);
                }
                return zoomInCommand;
            }
        }

        ICommand zoomOutCommand;
        public ICommand ZoomOutCommand
        {
            get
            {
                if (zoomOutCommand == null)
                {
                    zoomOutCommand = new Telerik.Windows.Controls.DelegateCommand(ZoomOut, CanZoomOut);
                }
                return zoomOutCommand;
            }
        }

        private ChartArea _chartArea;
        public ChartArea ChartArea
        {
            get
            {
                return this._chartArea;
            }
            set
            {
                if (this._chartArea == value) return;
                this._chartArea = value;
                OnPropertyChanged("ChartArea");
            }
        }
        #endregion

        public Viewmodel()
        {

            ChartsCollection = new ObservableCollection<ChartData>();

            #region Data

            ChartsCollection.Add(new ChartData() { YBinding = 100, XBinding = new DateTime(2011, 12, 1, 0, 1, 10).ToOADate()});
            ChartsCollection.Add(new ChartData() { YBinding = -20, XBinding = new DateTime(2011, 12, 1, 0, 2, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = -30, XBinding = new DateTime(2011, 12, 1, 0, 3, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = -70, XBinding = new DateTime(2011, 12, 1, 0, 4, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = -60, XBinding = new DateTime(2011, 12, 1, 0, 5, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 0, XBinding = new DateTime(2011, 12, 1, 0, 6, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = -40, XBinding = new DateTime(2011, 12, 1, 0, 7, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 50, XBinding = new DateTime(2011, 12, 1, 0, 8, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 20, XBinding = new DateTime(2011, 12, 1, 0, 9, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 90, XBinding = new DateTime(2011, 12, 1, 0, 10, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 40, XBinding = new DateTime(2011, 12, 1, 0, 11, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 30, XBinding = new DateTime(2011, 12, 1, 0, 12, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 70, XBinding = new DateTime(2011, 12, 1, 0, 13, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 10, XBinding = new DateTime(2011, 12, 1, 0, 14, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 30, XBinding = new DateTime(2011, 12, 1, 0, 15, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 10, XBinding = new DateTime(2011, 12, 1, 0, 16, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 20, XBinding = new DateTime(2011, 12, 1, 0, 17, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 30, XBinding = new DateTime(2011, 12, 1, 0, 18, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 50, XBinding = new DateTime(2011, 12, 1, 0, 19, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 20, XBinding = new DateTime(2011, 12, 1, 0, 20, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 10, XBinding = new DateTime(2011, 12, 1, 0, 21, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 0, XBinding = new DateTime(2011, 12, 1, 0, 22, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 70, XBinding = new DateTime(2011, 12, 1, 0, 23, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 20, XBinding = new DateTime(2011, 12, 1, 0, 24, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 80, XBinding = new DateTime(2011, 12, 1, 0, 25, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 40, XBinding = new DateTime(2011, 12, 1, 0, 26, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 90, XBinding = new DateTime(2011, 12, 1, 0, 27, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 50, XBinding = new DateTime(2011, 12, 1, 0, 28, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 30, XBinding = new DateTime(2011, 12, 1, 0, 29, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 80, XBinding = new DateTime(2011, 12, 1, 0, 30, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 154, XBinding = new DateTime(2011, 12, 1, 0, 31, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 194, XBinding = new DateTime(2011, 12, 1, 0, 32, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 144, XBinding = new DateTime(2011, 12, 1, 0, 33, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 124, XBinding = new DateTime(2011, 12, 1, 0, 34, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 114, XBinding = new DateTime(2011, 12, 1, 0, 35, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 194, XBinding = new DateTime(2011, 12, 1, 0, 36, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 144, XBinding = new DateTime(2011, 12, 1, 0, 37, 10).ToOADate() });
            ChartsCollection.Add(new ChartData() { YBinding = 154, XBinding = new DateTime(2011, 12, 1, 0, 38, 10).ToOADate() });

            #endregion

            StartDate = ChartsCollection.FirstOrDefault().XBinding;
            EndDate = ChartsCollection.LastOrDefault().XBinding;
             Step = (EndDate - StartDate)/7;

             Ymin = ChartsCollection.Min(a => a.YBinding);
             Ymax = ChartsCollection.Max(a => a.YBinding);
             Ystep = (Ymax - Ymin) / 4;
        }

        public void ChartDataBound(object sender, ChartDataBoundEventArgs e)
        {

            ((Telerik.Windows.Controls.DelegateCommand)ZoomInCommand).InvalidateCanExecute();
            ((Telerik.Windows.Controls.DelegateCommand)ZoomOutCommand).InvalidateCanExecute();

        }


        /// <summary>
        /// Click event of Zoom-In button
        /// </summary>
        /// <param name="parameter"></param>
        public void ZoomIn(object parameter)
        {
            this.ChartArea.ZoomScrollSettingsX.SuspendNotifications();

            double zoomCenter = this.ChartArea.ZoomScrollSettingsX.RangeStart + (this.ChartArea.ZoomScrollSettingsX.Range / 2);
            double newRange = Math.Max(this.ChartArea.ZoomScrollSettingsX.MinZoomRange, this.ChartArea.ZoomScrollSettingsX.Range) / 2;
            this.ChartArea.ZoomScrollSettingsX.RangeStart = Math.Max(0, zoomCenter - (newRange / 2));
            this.ChartArea.ZoomScrollSettingsX.RangeEnd = Math.Min(1, zoomCenter + (newRange / 2));
            StartDate = this.ChartArea.AxisX.MinValue;
            EndDate = this.ChartArea.AxisX.MaxValue;
            Ymin = this.ChartArea.AxisY.MinValue;
            Ymax = this.ChartArea.AxisY.MaxValue;
            this.ChartArea.ZoomScrollSettingsX.ResumeNotifications();

            ((Telerik.Windows.Controls.DelegateCommand)ZoomInCommand).InvalidateCanExecute();
            ((Telerik.Windows.Controls.DelegateCommand)ZoomOutCommand).InvalidateCanExecute();
        }

        /// <summary>
        /// Returns true/false for ZommIn Command
        /// </summary>
        /// <param name="parameter"></param>
        /// <returns></returns>
        public bool CanZoomIn(object parameter)
        {
            if (this.ChartArea == null || ChartsCollection.Count == 0)
                return false;

            return this.ChartArea.ZoomScrollSettingsX.Range > this.ChartArea.ZoomScrollSettingsX.MinZoomRange;
        }

        /// <summary>
        /// Click event of Zoom-Out button
        /// </summary>
        /// <param name="parameter"></param>
        public void ZoomOut(object parameter)
        {
            this.ChartArea.ZoomScrollSettingsX.SuspendNotifications();

            double zoomCenter = this.ChartArea.ZoomScrollSettingsX.RangeStart + (this.ChartArea.ZoomScrollSettingsX.Range / 2);
            double newRange = Math.Min(1, this.ChartArea.ZoomScrollSettingsX.Range) * 2;

            if (zoomCenter + (newRange / 2) > 1)
                zoomCenter = 1 - (newRange / 2);
            else if (zoomCenter - (newRange / 2) < 0)
                zoomCenter = newRange / 2;

            this.ChartArea.ZoomScrollSettingsX.RangeStart = Math.Max(0, zoomCenter - newRange / 2);
            this.ChartArea.ZoomScrollSettingsX.RangeEnd = Math.Min(1, zoomCenter + newRange / 2);

            this.ChartArea.ZoomScrollSettingsX.ResumeNotifications();

            ((Telerik.Windows.Controls.DelegateCommand)ZoomInCommand).InvalidateCanExecute();
            ((Telerik.Windows.Controls.DelegateCommand)ZoomOutCommand).InvalidateCanExecute();
        }
        public bool CanZoomOut(object parameter)
        {
            if (this.ChartArea == null || ChartsCollection.Count == 0)
                return false;

            return this.ChartArea.ZoomScrollSettingsX.Range < 1d;
        }

        #region OnNotifyProperty
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged == null) return;
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        #endregion

    }
    public class ChartData
    {
        //For x-axix Bindings
        private double _xBinding;
        public double XBinding
        {
            get
            { return this._xBinding; }
            set
            { this._xBinding = value; }
        }

        //For y-axix Bindings
        private double _yBinding;
        public double YBinding
        {
            get
            { return this._yBinding; }
            set
            { this._yBinding = value; }
        }

    }
}
---------------------------------------------------------------------------------

Also I tried to use Range= true but in that sometime it takes future date and show graph line upto that future that (though I dont have data to show graph line upto that future date) and I want exact range to set the graph.
Can you please help me to solve this ?

Thank you,
Dipika

[Ves]

Hi Dipika,

Please, use RadChartView. It is the newer control which addresses the limitations and deficiencies that we have identified in the RadChart implementation. You can find more information in our help and online examples.

Best regards,
Ves
Telerik