Zoom and Pan | Visible Range - Branched from forum 179819

[Jason]

Hello Nanthini, thank you very much for your response, unfortunately I could not get the behaviour I wanted working.

I have since switched over to a WPF application and to using SFChart.   I'd like to focus in on the zooming behaviour with some additional observations and screenshots, but I understand this forum is for WinForms in particular.  Please let me know if you would like me to create a new query in the WPF forum.

The behaviour objectives:

1. When zooming on the X Axis, the most recent data must remain in view.
2. When panning, removing most recent data from view, new zoom will consider the most recent visible data point as the anchor for zooming.
3. When zoom in complete, the visible data should autoscale on the Y Axis - making the data clearer and properly scaled.

I have attempted a number of methods to acheive point 1.  The screenshot below shows the most recent where I attempt to override the the X Axis Minimum and Maximum values.  This does not work.

In the next 2 screenshots I have commented out the ZoomChanged event handler code.

Screenshot 1 shows a view of all data.  Screenshot 2 shows the data from a single forward roll of the mousewheel.
After the zoom, I can pan all the way to the oldest data, but I cannot pan to the newest data - The zoom chops off over a years worth of data.

Screenshot 1

Screenshot 2

Hoping you can provide guidence and clarity as to what I am doing wrong ;-)

Again, please let me know if you would like me to move this query over the the WPF forum.

Kind regards

Jason

---------------------------------------------------------------------------------------------------

Sorry, I forgot to provide the chart XAML.  Please see below.

<syncfusionChart:SfChart x:Name="financialChart" Margin="10" Grid.Column="1" ZoomChanged="financialChart_ZoomChanged" ZoomChanging="financialChart_ZoomChanging">            <syncfusionChart:SfChart.Behaviors>                <syncfusionChart:ChartZoomPanBehavior x:Name="financeChartZoomPanBehaviour" EnableMouseWheelZooming="True" EnablePanning="True" EnablePinchZooming="False" EnableSelectionZooming="False" EnableZoomingToolBar="False" HorizontalPosition="Right" ResetOnDoubleTap="True" ZoomMode="X" ZoomRelativeToCursor="True"  />            </syncfusionChart:SfChart.Behaviors>            <syncfusionChart:SfChart.PrimaryAxis>                <syncfusionChart:DateTimeAxis PlotOffset="25" Header="Date" ShowGridLines="True" LabelFormat="dd/MM/yyyy" EnableBusinessHours="True" IntervalType="Days" Interval="1"   />            </syncfusionChart:SfChart.PrimaryAxis>            <syncfusionChart:SfChart.SecondaryAxis>                <syncfusionChart:NumericalAxis x:Name="axis2" PlotOffset="0" Header="Stock Price" StartRangeFromZero="False" HeaderPosition="Far" OpposedPosition="True" />            </syncfusionChart:SfChart.SecondaryAxis>            <syncfusionChart:FastCandleBitmapSeries Name="series" syncfusionChart:ChartTooltip.EnableAnimation="True" BorderThickness="0" Close="AskClose" ComparisonMode="Low" EnableAnimation="True" High="AskHigh" ItemsSource="{Binding SelectedInstrumentPeriodPrices}" Label="Candleseries" Low="AskLow" Open="AskOpen" ShowTooltip="True" XBindingPath="TimeStamp" Palette="Metro" >            </syncfusionChart:FastCandleBitmapSeries>            <syncfusionChart:SfChart.Annotations>                <syncfusionChart:HorizontalLineAnnotation x:Name="annotation" ShowAxisLabel="True" ShowLine="True" Y1="{Binding PriceAnnotation}"></syncfusionChart:HorizontalLineAnnotation>            </syncfusionChart:SfChart.Annotations>        </syncfusionChart:SfChart>

[Nanthini Mahalingam]

Hi Jason,

Thank you for your response. We have created a new thread related to your Zoom and Panning behavior queries on WPF platform

We have analyzed your queries and have the following suggestions:

Query 1: When zooming on the X Axis, the most recent data must remain in view.

Query 2: When panning, removing most recent data from view, new zoom will consider the most recent visible data point as the anchor for zooming.

You can achieve these two requirements with our axis’s scrollbar support. If you want to see to recent data while zooming, you can drag left side thump of scrollbar always.

If you want to pan the area, click and drag the thump of left area

We have attached video demonstration for that, please refer it.  And please enable to scrollbar by setting EnableScrollbar as true in DateTimeAxis as like below. 

<syncfusion:DateTimeAxis  PlotOffset="25"

            Header="Date" EnableScrollBar="True"

            ShowGridLines="True"

            LabelFormat="dd/MM/yyyy"

            EnableBusinessHours="True"

            IntervalType="Days"

            Interval="1" />

</syncfusion:SfChart.PrimaryAxis>

Query 3: When zoom in complete, the visible data should autoscale on the Y Axis - making the data clearer and properly scaled.

We suggest you autoscale the visible data on the Y Axis by calculating the maximum and minimum range of data using the range of data values as per the following code

private void SfChart_ZoomChanged_1(object sender, ZoomChangedEventArgs e)

        {

            CalculateRange(e.Axis);

        }

 

        private void SfChart_PanChanged(object sender, PanChangedEventArgs e)

        {

            CalculateRange(e.Axis);

        }

 

        private void CalculateRange(ChartAxis axis)

        {

            var data = series.ItemsSource as ObservableCollection<CandleChartModel>;

            double yMax = double.MinValue, yMin= double.MaxValue;

            foreach (var item in data)

            {

                if (axis.VisibleRange.Inside(item.TimeStamp.ToOADate()))

                {

                    yMax = Math.Max(yMax, item.AskHigh);

                    yMax = Math.Max(yMax, item.AskLow);

                    yMax = Math.Max(yMax, item.AskOpen);

                    yMax = Math.Max(yMax, item.AskClose);

 

                    yMin = Math.Min(yMin, item.AskHigh);

                    yMin = Math.Min(yMin, item.AskLow);

                    yMin = Math.Min(yMin, item.AskOpen);

                    yMin = Math.Min(yMin, item.AskClose);

                }

            }

            axis2.Maximum = yMax;

            axis2.Minimum = yMin;

        }

Please refer to the following document that will be helpful to you.

https://help.syncfusion.com/wpf/charts/interactive-features/resizable-scrollbar#adding-scrollbar-to-the-axis

Regards,

Nanthini Mahalingam.

Attachment: Files_859f9b9.zip

[Jason]

Hello Nanthini, thank you for moving this thread into the right forum and for your response.

I have added your recommendations but am still facing some issues.

In particular zoom appears to drop about a years worth of data.

I have created a screen recording and dropped it onto one drive:  https://1drv.ms/u/s!AncHCcyamzbCisIBm4krp8hSYU0iog?e=kWDzS1

In it, I have hopefully explained the issue and my objectives with zooming.

Thanks again 

Kind regards

Jason

[Nanthini Mahalingam]

Thank you for bringing this to our attention. Our team is currently reviewing the video clip provided and investigating the panning issue after zooming. We will have more information for you soon and will keep you updated on progress of the resolution.

Thank you for your patience.

[Nanthini Mahalingam]

We have been able to reproduce the end region clipping while panning on our end and are currently working on this in our source level. We will provide the complete detail in two business days, on January 18, 2023.

We appreciate your patience until then.

[Nanthini Mahalingam]

Thank you for your patience. We have analyzed your query and the provided video clipping that shows the coding and output of the issue. From the video, it appears that You have enabled the EnableBusinessHours property of the DateTimeAxis.

However, to fully utilize the EnableBusinessHours property, you need to set the OpenTime, CloseTime and WorkingDays properties as well.

This missing value for these properties is the reason for the data missing while panning after zooming the data, as shown in the following code snippet.

  <syncfusion:SfChart.PrimaryAxis>

                <syncfusion:DateTimeAxis   PlotOffset="25" Header="Date"

                                           EnableScrollBar="True"

                                           ShowGridLines="True"

                                           LabelFormat="dd/MM/yyyy"

                                           EnableBusinessHours="True"

             WorkingDays="Friday,Saturday,Sunday,Monday,Tuesday,Wednesday,Sunday"

                                           OpenTime="9"

                                           CloseTime="24"

                                           IntervalType="Days"

                                           Interval="1" />

            </syncfusion:SfChart.PrimaryAxis>

If you do not require the EnableBusinessHours property of the DateTimeAxis, you can set false value for this property

Please refer to the following documentation for more information on DataTimeAxis

https://help.syncfusion.com/wpf/charts/axis#datetimeaxis

https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.DateTimeAxis.html#Syncfusion_UI_Xaml_Charts_DateTimeAxis_EnableBusinessHours

Please let me know if you have any further assistance. We are here to help.

Attachment: SF179925_9f48074.zip