Syncfusion Blazor RangeBar Chart - Issue in Scrolling Prgramatically

[Ramesh S]

Hi,

I have created a the following Range Bar chart with lazy loading when scrolling. The scrolling of the Y axis is handled in 'OnScrollChanged' event of the SfChart control. I want to move the scrollbar to a specific point on page load or in a button click event programatically. If I set the 'Minimum' and 'Maximum' of the Y Axis and filtered the data source accordingly in 'Scroll Test' button click event, the chart is showing the data points specific to the data source based on 'Minimum' and 'Maximum' properties but the scroll bar is not moving as working in manual scroll movement. Also in the  OnScrollChanged, is there any specific calculation to assign new Minimum and Maximum of the Axis based on e.CurrentRange.Minimum and e.CurrentRange.Maximum properties.? I have attached the sample source code and screenshots for your reference. Thanks.

Attachment: SyncFusionBlazorHybridApp1_4dd4635a.zip

[Durga Gopalakrishnan]

Hi Ramesh,

Greetings from Syncfusion.

We are validating your reported scenario. We will update the further details within two business days. We appreciate your patience until then.

Regards,

Durga Gopalakrishnan.

[Durga Gopalakrishnan]

Ramesh,

Thanks for being patience.

We have analyzed your reported scenario using the sample you provided and would like to clarify the behavior of the lazy loading feature. There are two available options: Range and PointsLength.

• Range: This is supported for the DateTime axis and allows you to set the start and end range using the Minimum and Maximum properties in ChartAxisScrollbarSettingsRange.
• PointsLength: This is supported for the Double axis, allowing you to set the total number of data points.

When scrolling the scrollbar, the next set of data points is loaded on demand by retrieving the start and end range. This is the default behavior.

In your sample, you have used PointsLength and are trying to change the axis minimum and maximum range. However, modifying the axis minimum and maximum will not update the scrollbar position. To adjust the scrollbar, you need to move it in the UI.

You can retrieve the current range minimum and maximum values using the OnScrollChanged event. Based on this range, you can update the data source as needed.

Let us know if you have any concerns.

[Ramesh S]

Hi,

Thanks for your replay. Can we programmatically adjust the scrollbar position instead of manually moving in the UI? Also can we load all data points at once instead of lazy loading in ' OnScrollChanged' event?

[Durga Gopalakrishnan]

Ramesh,

Yes, your requirement can be achieved using the axis ZoomFactor and ZoomPosition. In the attached sample, the chart series data source contains a total of 100 data points. Initially, we set the ZoomFactor to 0.15 (15/100) to display 15 data points and ZoomPosition to 0, positioning the scrollbar at the start. On button click, the ZoomPosition is updated to display the next set of 15 data points, like scrolling through the UI.

<SfButton OnClick="ChangePosition" Content="Change Position"></SfButton>

 

<SfChart Title="Stock Price Analysis">

<ChartPrimaryXAxis ZoomFactor="@zoomFactor" ZoomPosition="@zoomPosition" >

</ChartPrimaryXAxis>

<ChartZoomSettings ToolbarDisplayMode="ToolbarMode.None" EnableScrollbar="true"> </ChartZoomSettings>

</SfChart>

 

@code {

public double zoomFactor = 1;

public double zoomPosition = 0;

public double displayedPoints = 15;

public double totalPoints = 0;

protected override void OnInitialized()

{

    GetChartPoints();

    totalPoints = ChartPointsX.Count;

    zoomFactor = displayedPoints / totalPoints;

}

public void ChangePosition(){

    // Adjust zoom position to move forward

    zoomPosition += (zoomFactor / 2); // Move by half of the visible range

 

    // Ensure zoomPosition does not exceed 1 (100% of the data)

    if (zoomPosition + zoomFactor > 1)

    {

        zoomPosition = 0; // Reset to the start when reaching the end

    }

}

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

Kindly revert us if you have any concerns.