DateTimeAxis zoom-in quarter steps

[Pablo]

I have a chart with X=DateTimeAxis, Y=NumericAxis and an 4 items per hour from 00:00 to 23:45. 

When I zoom in the data I'd like to see quarter steps (15 minutes) instead of "automatic 20 minutes steps". 

Is there any way to configure that?

Thanks!!

Normal view:

Zoomed in:

[Bharathiraja K]

Hi Pablo, 

 

Greetings from Syncfusion. EnableAutoIntervalOnZooming properties determines the update of the axis intervals, based on visible range while zooming. By setting EnableAutoIntervalOnZooming as false and set interval as 15 means, we can achieve your requirement. If it is true, we will calculate auto interval in source. Please refer the below code snippet. 

 

[XAML]: 

<chart:SfChart.PrimaryAxis> 

                        <chart:DateTimeAxis EnableAutoIntervalOnZooming="False" IntervalType="Minutes" Interval="15" Minimum="{Binding Minimum}" Maximum="{Binding Maximum}" > 

   <chart:DateTimeAxis.LabelStyle > 

                                <chart:ChartAxisLabelStyle TextColor="White" LabelFormat="hh mm" > 

                                </chart:ChartAxisLabelStyle> 

                            </chart:DateTimeAxis.LabelStyle> 

                        </chart:DateTimeAxis> 

                    </chart:SfChart.PrimaryAxis> 

 

UG link: https://help.syncfusion.com/xamarin/sfchart/axis#date-time-intervals  

 

Hope the above information will helpful to you.  

 

Regards, 

Bharathi. 

[Pablo]

Thanks for the quick reply. With that suggestion we fix the zoom-in view, but the normal view gets worse. 

Is there a way to mix/modify/adapt both configurations? (hours-2 in normal view and minutes-15 if zoom-in)

Normal view:

Zoom-in view: 

[Bharathiraja K]

Hi Pablo, 

 

For every interaction, chart provides enough events to handle their necessary customizations. By changing the interval and interval types in zoom event, we can achieve your requirement.  

 

ZoomStart – Event trigger when the user start zooming through pinch gesture. 

ZoomDelta – Event trigger while zooming. 

ZoomEnd – Event trigger after zooming stopped.  

ResetZoom – Event trigger after zoom reset by DoubleTap 

 

Ug Link: https://help.syncfusion.com/xamarin/sfchart/zoompan#events  

 

We have prepared the sample that will be downloaded from below link. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SimpleSample1478233720.zip  

 

[XAML] 

<chart:SfChart x:Name="ChartControl" ZoomStart="ChartControl_ZoomStart" ResetZoom="ChartControl_ResetZoom" ZoomDelta="ChartControl_ZoomDelta" ZoomEnd="ChartControl_ZoomEnd" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> 

            <chart:SfChart.PrimaryAxis> 

                <chart:DateTimeAxis x:Name="XAxis" EnableAutoIntervalOnZooming="False" IntervalType="Hours" Interval="4" Minimum="{Binding Minimum}" Maximum="{Binding Maximum}" ShowMajorGridLines="False" ShowMinorGridLines="False"> 

                    <chart:DateTimeAxis.LabelStyle > 

                        <chart:ChartAxisLabelStyle LabelFormat="HH mm" > 

                        </chart:ChartAxisLabelStyle> 

                    </chart:DateTimeAxis.LabelStyle> 

                </chart:DateTimeAxis> 

            </chart:SfChart.PrimaryAxis> 

 

. . . 

. . . 

 

</chart:SfChart> 

 

[C#] 

        private void ChartControl_ResetZoom(object sender, ChartResetZoomEventArgs e) 

        { 

            ZoomPan.IsInvokeTapZoomIn = true; 

            XAxis.IntervalType = DateTimeIntervalType.Hours; 

            XAxis.Interval = 4; 

            XAxis.EnableAutoIntervalOnZooming = false; 

        } 

 

        //At Zoom start 

        private void ChartControl_ZoomStart(object sender, ChartZoomStartEventArgs e) 

        { 

            ResetIntervals(); 

        } 

 

        //Resetting the intervals. 

        private void ResetIntervals() 

        { 

            ZoomPan.IsInvokeTapZoomIn = false; 

            if (XAxis.ZoomPosition == 0 || XAxis.ZoomFactor == 1) //Default values 

            { 

                XAxis.IntervalType = DateTimeIntervalType.Hours; 

                XAxis.Interval = 4; 

            } 

            else 

            { 

                XAxis.IntervalType = DateTimeIntervalType.Minutes; 

                XAxis.Interval = 15; 

            } 

 

            XAxis.EnableAutoIntervalOnZooming = false; 

        } 

 

One more step to follow if you use double tap zoom to initiate zoom on Android and iOS. 

 

[C#] CustomZoom 

public class CustomBehavior: ChartZoomPanBehavior 

    { 

        public bool IsInvokeTapZoomIn = true; 

 

        //Invoke while doble tap on chart. 

        protected override void DoubleTap(float pointX, float pointY) 

        { 

            if (Chart != null) 

            { 

                if (IsInvokeTapZoomIn) 

                { 

                    IsInvokeTapZoomIn = !IsInvokeTapZoomIn; 

                    (Chart.PrimaryAxis as DateTimeAxis).IntervalType = DateTimeIntervalType.Minutes; 

                    (Chart.PrimaryAxis as DateTimeAxis).Interval = 15; 

                } 

                else 

                { 

                    IsInvokeTapZoomIn = !IsInvokeTapZoomIn; 

                    (Chart.PrimaryAxis as DateTimeAxis).IntervalType = DateTimeIntervalType.Hours; 

                    (Chart.PrimaryAxis as DateTimeAxis).Interval = 4; 

                } 

 

                Chart.PrimaryAxis.EnableAutoIntervalOnZooming = false; 

            } 

            base.DoubleTap(pointX, pointY); 

        } 

    } 

 

[XAML] 

<chart:SfChart.ChartBehaviors> 

                <local:CustomBehavior x:Name="ZoomPan" ZoomMode="X" EnableDoubleTap="True" EnablePanning="True" EnableZooming="True" /> 

            </chart:SfChart.ChartBehaviors> 

 

Hope the above information will help you to achieve your requirement.  

 

 

 

Fig: before zoom in 

 

 

 

Fig: After zoom in  

 

 

Regards, 

Bharathi.