Is there any way to establish the zoomed subset of a chart dataset?

[Bruce]

I am using a scatter chart (and it's working beautifully, by the way, thank you!) that has zoom functionality.  The chart has 3 different series with an X axis of date and a Y axis of decimal (amount), all driven off of a complex type  List of SearchResults

What I would like to do is when my customer zooms into one area of the chart, build a subset List of SearchResult for each point in each series that is currently displayed in the zoom window.  Any suggestions on this?

(I understand i can catch the zoom event, but the args being passed in are simply zoomed x/y coordinates... I have found nothing i can use to filter my SearchResult list.

Thank you,

Bruce

[Durga Gopalakrishnan]

Hi Bruce,

We suggest you to use OnZoomEnd event to get the axis range minimum and maximum value after zooming the chart. Based on these range you can filter the zoomed data points. We have prepared sample based on your requirement. Please check with the below snippet and sample.

@using Syncfusion.Blazor.Charts

<SfChart>

   <ChartEvents OnZoomEnd="OnZoomingEvent"></ChartEvents>

</SfChart>

@code {

    public List<ScatterData> FilteredData { get; set; } = new List<ScatterData>();

    public void OnZoomingEvent(ZoomingEventArgs args)

    {

        if (FilteredData.Count > 0)

            FilteredData.Clear();

        var min = (new DateTime(1970, 1, 1)).AddMilliseconds((args.AxisCollection[0].AxisRange.Min));

        var max = (new DateTime(1970, 1, 1)).AddMilliseconds((args.AxisCollection[0].AxisRange.Max));

        for(var i =0; i< ChartPoints.Count; i++)

        {

            if(ChartPoints[i].Date >= min && ChartPoints[i].Date<= max)

            {

                FilteredData.Add(ChartPoints[i]);

            }

        }

   }

}

Sample : https://blazorplayground.syncfusion.com/VDBJDWDzpKbqlnMe

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Bruce]

Thank you for the quick response!  Your answer started me down the correct path... here is the working code that calculates the selected Min / Max date ranges - it required the use of ZoomPosition and ZoomFactor which was not included in your code sample:

        var xRange = args.AxisCollection[0].AxisRange.Max - args.AxisCollection[0].AxisRange.Min;
        var selectedXMinBeforeConversion = xRange * args.AxisCollection[0].ZoomPosition;
        var startDate = (new DateTime(1970, 1, 1)).AddMilliseconds(args.AxisCollection[0].AxisRange.Min);
        var selectedXMin = startDate.AddMilliseconds(selectedXMinBeforeConversion);
        var selectedXMax = startDate.AddMilliseconds(selectedXMinBeforeConversion + (xRange * args.AxisCollection[0].ZoomFactor));

[Durga Gopalakrishnan]

Bruce,

Most welcome. We are always happy in assisting you. Please get back to us if you have any other concerns.