Zoom and Pan | Visible Range

[Jason]

Hello, 

I am attempting to configure the Panning and Zooming behaviors of HiLoOpenClose Chart and need to reach out for guidence.
The behaviours I would like to implement are as follows:

1. Scrollbars are disabled.  Viewing the data is done with Pan and Zoom only.
2. The mouse wheel is the primary zoom method.
3. On initial load of my data ensure that the start of it is set to the left side of the chart (less some margin) and the end of it is set to right side of the chart (plus a some margin).  I believe I have this portion solved by setting the PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.None.
4. When I Pan the to the left or right the data auto scales to the display area. 
5. When I zoom in or out the data auto scales to the display area. I have attempted the approach found here but it is inconsistent and not performant: https://help.syncfusion.com/wpf/classic/chart/how-to/auto-scale-y-axis-when-x-axis-is-zoomed
6. When I zoom in, the visible end of the data (data on the right side of the chart area) should remain anchored. On Zoom in, the visable data on the left side of the chart area would be removed from the view.
1. If the true end of the data is panned off the screen to the left and I zoom in or out, the visible end of the data is the anchor point for the zoom.

I have included my current setup for the chart below. 

I have looked at the Zooming and Scrolling examples included with the Syncfusion Windows Forms Control Panel and I cannot see these behaviours demonstrated there.  

Hoping I can ask for a code sample that demostrates the behaviours I am looking for.

Kind regards

Jason

public void SetupChart()
{
    ChartDataBindModel model = new ChartDataBindModel(InstrumentPriceHistoryBindingSource);
    model.XName = "TimeStamp";
    model.YNames = new string[] { "AskHigh", "AskLow", "AskOpen", "AskClose" };
    ChartSeries chartSeries = new ChartSeries("Price", ChartSeriesType.HiLoOpenClose);
 
    chartSeries.SeriesModel = model;
    ccInstrument.Series.Add(chartSeries);
    ccInstrument.Skins = Skins.Metro;
    ccInstrument.BorderAppearance.SkinStyle = Syncfusion.Windows.Forms.Chart.ChartBorderSkinStyle.None;
 
    ccInstrument.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
    ccInstrument.ChartArea.PrimaryXAxis.HidePartialLabels = true;
 
    ccInstrument.ShowToolTips = true;
    ccInstrument.PrimaryXAxis.DrawGrid = false;
    ccInstrument.PrimaryXAxis.GridLineType.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
    ccInstrument.PrimaryYAxis.GridLineType.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
    ccInstrument.PrimaryXAxis.ValueType = ChartValueType.DateTime;
    ccInstrument.Zooming.ShowBorder = true;
    ccInstrument.Zooming.Opacity = 0.6f;
    ccInstrument.GetVScrollBar(ccInstrument.PrimaryYAxis).ZoomButton.Size = new Size(0, 0);
    ccInstrument.GetHScrollBar(ccInstrument.PrimaryXAxis).ZoomButton.Size = new Size(0, 0);
    ccInstrument.EnableXZooming = true;
    ccInstrument.EnableYZooming = false;
    ccInstrument.ZoomFactorX = 1;
    ccInstrument.ZoomFactorX = 1;
    ccInstrument.ShowScrollBars = true;
    ccInstrument.ResetOnDoubleClick = true;
    ccInstrument.ZoomType = ZoomType.MouseWheelZooming;
    ccInstrument.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
    ccInstrument.PrimaryXAxis.Inversed = true;
    ccInstrument.PrimaryYAxis.Inversed = true;
    ccInstrument.PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.None;
    ccInstrument.PrimaryYAxis.RangePaddingType = ChartAxisRangePaddingType.None;
}

[Nanthini Mahalingam]

Hi Jason,

Thanks for your query regarding zooming and panning behavior of HiLoOpenClose chart.

We have analyzed your requirements and have the following suggestions:

Query 1: Scrollbars are disabled.  Viewing the data is done with Pan and Zoom only.

We can disable the scrollbar by setting the ShowScrollBars property as False and enable panning by setting ZoomingAction as Panning

chartControl1.ShowScrollBars = false;

chartControl1.MouseAction = ChartMouseAction.Panning;

chartControl1.PrimaryXAxis.ZoomActions = ChartZoomingAction.Panning;

chartControl1.ZoomType = ZoomType.MouseWheelZooming;

Query 2: The mouse wheel is the primary zoom method.

By enabling the ZoomType, we can achieve zooming on both axis of the chart.

chartControl1.EnableXZooming = true;

chartControl1.EnableYZooming = true;

Query 3: On initial load of my data ensure that the start of it is set to the left side of the chart (less some margin) and the end of it is set to right side of the chart (plus a some margin).  I believe I have this portion solved by setting the PrimaryXAxis.RangePaddingType = ChartAxisRangePaddingType.None.

By setting the RangePaddingType as None, it can make it easier to compare the data points to the edges of the chart.

Query 5: When I zoom in or out the data auto scales to the display area. I have attempted the approach found here but it is inconsistent and not performant:

When we zoom in or zoom out the data, data range calculated automatically, and we would view the display area of the chart.

Query 6: When I zoom in, the visible end of the data (data on the right side of the chart area) should remain anchored. On Zoom in, the visable data on the left side of the chart area would be removed from the view. If the true end of the data is panned off the screen to the left and I zoom in or out, the visible end of the data is the anchor point for the zoom.

You can be visible edge labels all the time by setting HidePartialLabels as false as per the below code snippet

chartControl1.ChartArea.PrimaryXAxis.HidePartialLabels = false;

We hope these suggestions are helpful. You may also find the following documents and samples useful for further reference

https://help.syncfusion.com/windowsforms/chart/runtime-features#zooming-via-mouse-wheel

https://help.syncfusion.com/windowsforms/chart/runtime-features#panning-support-for-zoomed-chart

Please let us know if you have any other questions

Regards,

Nanthini Mahalingam.

Attachment: Files_4d2141ac.zip

[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

[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]

Thank you for your response, we have created a new thread specifically for your requirement and have provided a link to it here: https://forumassist.syncfusion.com/179925 . We encourage you to follow up on this new thread for any further assistance or updates. This current thread will now be closed.