We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Complete example of auto scale y axis when x axis is zoomed

Hello,

I am new to Syncfusion. I love the product, but I am an inexperienced programmer. I have a scatter SfChart and I would like to auto scale y axis when x axis is zoomed. I have seen the code snippet http://help.syncfusion.com/ug/wpf/default.htm#!documents/howtoautoscaleyaxisw.htm

 

But I still don’t know how to use it. Here are some of my problems:

 

I am unable to find the VisibleRangeChanged event associated with the chart or axis.

Your code includes the class RecordFilterDescriptor but I can't seem to find it in the overall program.

 

I would greatly appreciate it if you could provide a more complete example so that I could see how to implement auto scale y axis when x axis is zoomed.

 

Thank you.


13 Replies

RA Rachel A Syncfusion Team February 23, 2015 12:47 PM UTC

Hi Steven,

Thanks for your interest in using Syncfuion products.

When set the ZoomMode as “XY” by default both axis will be scaled automatically. However, we can auto scale any of the axis (say Y-axis) while zooming another axis (say X-Axis, if we set ZoomMode=”X”) as reported old chart help link by using ZoomChanged Event. Please refer the below code snippet.

Code Snippet:

 private void sfchart_ZoomChanged(object sender, ZoomChangedEventArgs e)

  {

  

   }

We have prepared the sample based on this and please find the sample in the below location.

Sample: AutoScaleYAxis.zip

Please refer the below documentation for your more information about SfChart zoom and pan behavior.

Link: http://help.syncfusion.com/ug/wpf/default.htm#!documents/zoomingandpanning.htm

Note: There is no VisibleRangeChanged event and RecordFilterDescriptor class in our SfChart control.

Please let us know if you require any further assistance.

Thanks,

Rachel. A




SM Steven Michael February 28, 2015 01:53 PM UTC

Hello Rachel,

Thank you for your rapid response and detailed example.

I’m sorry but I guess didn’t explain my problem very well. When I ran your example with zoom on x only, the y axis did not auto-scale.

In order to achieve zoom on x only, I had to change one line in your example to the following:

 

<chart:ChartZoomPanBehavior EnableSelectionZooming="True" ZoomMode="X" />

 

The y axis did not auto-scale. I would greatly appreciate your advice on how to get the y axis to auto-scale when I use EnableSelectionZooming="True" ZoomMode="X"

Thank you for your help,

Steven



RA Rachel A Syncfusion Team March 2, 2015 01:43 PM UTC

Hi Steven,

Thank you for your response.

When you are using selection zooming, we can auto scale the y axis using SelectionZoomingEnd event as shown in the below code snippet.

Code Snippet:

private void SfChart_SelectionZoomingEnd(object sender, Syncfusion.UI.Xaml.Charts.SelectionZoomingEndEventArgs e)

        {

                }

We have modified the sample based on your requirement and please find the sample in the below location.

Sample: AutoScale_SelctionZooming.zip

Note: If this is not your requirement, please let us know your auto scaling functionality. It would be helpful for us to serve you better.

Please let us know if you require any further assistance.

Thanks,

Rachel. A




SM Steven Michael March 3, 2015 12:36 PM UTC

Thank you for your response.

I am trying to build a stock chart, where I can selection zoom on the x-axis and have the y-axis autoscale. This is some of the functionality I need:

 

1. A two pane stock chart with OHLC on the top pane and volume on the bottom pane.

2. The x-axis is a DateTimeCategoryAxis.

3. Only the x-axis for the volume pane is visible. The x-axis for the price pane in not visible so that the top pane can sit directly on the volume pane.

4. The cursor is a crosshairs that goes across both panes, and shows the date only on the x-axis of the bottom volume pane.

5. I can use the crosshairs cursor to selection zoom the x-axis, and the y-axis autoscales.

6. Finally, once I zoom the x-axis, a scrollbar appears.

7. When I use the scrollbar and scroll through the data, the y-axis autoscales to the data displayed.

 

I would greatly appreciate a sample program.

Kind regards

Steven



SS Sheik Syed Abthaheer M Syncfusion Team March 4, 2015 01:53 PM UTC

Hi Steven,

Thanks for your update.


Requirement

Response

A two pane stock chart with OHLC on the top pane and volume on the bottom pane.

You can achieve multiple pane support by using Chart Row/Column Definition. For more information about Multiple Pane chart support please refer the below link:

Link: http://help.syncfusion.com/ug/wpf/documents/area.htm

The x-axis is a DateTimeCategoryAxis.

Please refer below link for DateTimeCategoryAxis

Link: http://help.syncfusion.com/ug/wpf/documents/datetimecategoryaxis.htm

 

Only the x-axis for the volume pane is visible. The x-axis for the price pane in not visible so that the top pane can sit directly on the volume pane.

By default  in chart Row definition, the ChartAxis will be placed in the bottom pane.

The cursor is a crosshairs that goes across both panes, and shows the date only on the x-axis of the bottom volume pane.

You are able show the cross hair value for chart axis by setting the ShowTrackBallInfo as true for specified chart axis.

I can use the crosshairs cursor to selection zoom the x-axis, and the y-axis autoscales.

Finally, once I zoom the x-axis, a scrollbar appears.

When I use the scrollbar and scroll through the data, the y-axis autoscales to the data displayed.

 

For more information about CrossHair and ZoomPan behavior please refer our UG documentation. You can enable the Scrollbar(ChartAxis’s EnableScrollBar as True)and auto scale the Y-axis by using  chart zooming events.

We have prepared the simple sample based on your requirement. Please find the sample in the below location.

Sample: ChartRequirement.zip

Please let us know if you have any queries.

Regards,

M.Sheik




SM Steven Michael March 12, 2015 11:47 AM UTC


Thank you for your example M. Sheik.

I have a few questions. First, the example you provided does not seem to autoscale after zooming on the x-axis. I can’t see any logic in the method financialChart_SelectionZoomingEnd, which is supposed to autoscale the y-axis. Second, since this is supposed to be a stock chart the days cannot be consecutive. Weekend days must be skipped. Finally, the scrollbars on your example are on the y-axis. I would like to be able to scroll on the x-axis and have the y-axis autoscale.

Thank you for all you help so far.

Steven





SS Sheik Syed Abthaheer M Syncfusion Team March 13, 2015 12:49 PM UTC

 Hi Steven,

Thanks for the update.

Query 1: the example you provided does not seem to autoscale after zooming on the x-axis. I can’t see any logic in the method financialChart_SelectionZoomingEnd.

We would like to let you know that, we have already provided the logic for auto scale the y-axis in AutoScale_SelctionZooming.zip sample. Also you can change the calculation based on your scenario in financialChart_SelectionZoomingEnd event. In last sample we have used financialChart_SelectionZoomingEnd event for enable the axis scroll bar while perform the select zooming action and not for auto scale the y-axis.

Query 2: since this is supposed to be a stock chart the days cannot be consecutive. Weekend days must be skipped.

In order to skip the weekends, you need to filter the data points as only for working days and use DateTimeCategoryAxis as shown in the below sample.

Query 3: the scrollbars on your example are on the y-axis. I would like to be able to scroll on the x-axis and have the y-axis autoscale.

As we informed in previous update you can apply the scroll bar in chart axis by setting EnableScrollbar as “True”. So you can set the scroll bar for X-Axis as shown in the below code snippet.

Code Snippet [Xaml]:

<chart:SfChart.PrimaryAxis>

          <chart:DateTimeCategoryAxis EnableScrollBar="True"/>

</chart:SfChart.PrimaryAxis>
Sample: Chart_WeekDays.zip

Please let us know if you have any queries.

Regards,
M. Sheik
 

 




TV Thomas Vestergaard February 14, 2022 11:48 AM UTC

Sorry for bumping a way old subject.

But i cannot access the zip file, and i cannot find any other documentation on the single axis autozoom solution described above.

Regards

Thomas



YP Yuvaraj Palanisamy Syncfusion Team February 15, 2022 01:46 PM UTC

Hi Thomas, 
 
We have prepared the sample for your requirement “Single axis auto zoom scale” with the help of ZoomMode property of ChartZoomPanBehavior. Please find the following code example below. 
 
CodeSnippet: 
<chart:SfChart.Behaviors> 
    <chart:ChartZoomPanBehavior EnableSelectionZooming="True" 
                                ZoomMode="Y"  
                                EnablePanning="True" /> 
</chart:SfChart.Behaviors> 
 
Also, we have attached the sample for your reference. Please find the sample from the below link. 
 
  
Please let us know if you have any further assistance. 
 
Regards, 
Yuvaraj. 



TV Thomas Vestergaard February 15, 2022 07:24 PM UTC

Thanks for your reply.

I already have that part working - Mouse Zoom on the X axis and panning the same axis with click and drag.

But as shown in the image below, i need the Y axis to autozoom, so that Y values resize to fit the chart.
I guess you indicated where to do that, with the // Perform Action in the chart_ZoomChanged method, but not how. ;)




YP Yuvaraj Palanisamy Syncfusion Team February 16, 2022 11:18 AM UTC

Hi Thomas, 
 
We have achieved your requirement “While zoom the X-Axis, auto scale on Y-Axis” with the help of SelectionZoomingEnd and ZoomChanged event of chart for selection zooming and mouse zooming respectively. Please find the code example below. 
 
CodeSnippet: 
private void chart_ZoomChanged(object sender, ZoomChangedEventArgs e) 
{ 
    if ( e.NewRange != null && e.CurrentFactor != 1) 
    { 
        var range = (DoubleRange)(e.NewRange);                
        var x1 = range.Start; 
        var x2 = range.End; 
        var y1 = (double)secondaryAxis.VisibleRange.Start; 
        var y2 = (double)secondaryAxis.VisibleRange.End; 
 
        var collection = (chart.Series[0] as CandleSeries).GetDataPoints(x1, x2, y1, y2); 
 
        UpdateAxisRange(collection); 
    } 
} 
 
private void chart_SelectionZoomingEnd(object sender, SelectionZoomingEndEventArgs e) 
{ 
    var collection = (chart.Series[0] as CandleSeries).GetDataPoints(e.ZoomRect); 
    UpdateAxisRange(collection); 
} 
 
private void UpdateAxisRange(List<object> collection) 
{ 
    List<Model> data = new List<Model>(); 
        foreach (var datapoint in collection) 
        { 
            data.Add(datapoint as Model); 
        } 
 
        secondaryAxis.Minimum = data.Min(a => a.Low); 
        secondaryAxis.Maximum = data.Max(a => a.High); 
} 
 
 
Also, we have attached the sample for your reference. Please find the sample from the below link. 
 
 
Output: 
 
Selection Zooming: 
 
After selection: 
 
 
Please let us know if you have any further assistance. 
 
Regards, 
Yuvaraj. 



TV Thomas Vestergaard replied to Yuvaraj Palanisamy March 24, 2022 03:24 PM UTC

Your example did exactly what i wanted, so a big thank you from here! :)

If i may be so bold as to suggest that you guys take a look at https://www.tradingview.com/chart/

I realize that those guys only ​focuses on financial charting. But that platform have some awesome features and a really nice feel.

So doing a tutorial on how to archive some of the features and functionality they have, would be greatly appreciated. :)



YP Yuvaraj Palanisamy Syncfusion Team March 28, 2022 12:16 PM UTC

Hi Thomas, 
 
Thank you for your suggestion. We will consider publishing the tutorial blog for this. 
 
Also, please find the Syncfusion control demo from the below link 
 
Regards, 
Yuvaraj. 


Loader.
Up arrow icon