Scroll to end or a specific X Axis position programatically

Hello,

In sfCartesian when user Scrolls to left when AutoScrollMode is set to end. I would have button when clicked I would like chart scroll back to end of the chart i.e. Right most.

Also allow the user to click button and select the datetime to scroll to that specific date. 

I tried using zoomposition but was unable to scroll accurately using c# code on click of a button

Please help

thanks



2 Replies

NT Nitheeshkumar Thangaraj Syncfusion Team October 4, 2024 03:01 PM UTC

Hi Praveen,


Thank you for reaching out. Based on the information provided, it seems you are looking to control the ZoomPosition programmatically by a button click and also want to customize the chart to display segments by a specific date. We are currently working on preparing a sample to achieve this behavior. We will update the status or share the demo with you within two business days by October 8, 2024.

We appreciate your patience and understanding.


Regards,

Nitheesh.



AJ Arul Jenith Berkmans Syncfusion Team October 8, 2024 11:30 AM UTC

Hi Praveen,


Thank you for your queries. We have reviewed your requirements and would like to address them as follows:


Query 1: Scrolling the Chart to the Left When AutoScrollMode is Set to End


To achieve this, you can set the  ZoomPosition to 1 when the button is clicked, which will scroll the chart to the right end. If you want to scroll to the left end, set the ZoomPosition to 0.


Query 2: Clicking a Button to Scroll to a Specific Date


We’re pleased to inform you that your requirement can be achieved by using the axis ZoomPosition. We have prepared a sample based on your request, and you can review it for further details.


Code snippets:


 private void Button_Clicked_1(object sender, EventArgs e)

 {

     // Define the start and end dates of the x-axis

     DateTime startDate = new DateTime(1925, 01, 01);

     DateTime endDate = new DateTime(1932, 01, 01);

 

     // Define the target date you want to scroll to

     DateTime targetDate = new DateTime(1929, 01, 01);

 

     // Calculate the total duration in days between start and end dates

     double totalDays = (endDate - startDate).TotalDays;

     // Calculate the duration in days from the start date to the target date

     double daysToTarget = (targetDate - startDate).TotalDays;

     // Adjust the zoom factor based on visible width and total range

     double zoomFactor = XAxis.ZoomFactor; // e.g., 0.25 means 25% zoomed in

     // Calculate the zoom position based on target date position within the total range

     double zoomPosition = (daysToTarget / totalDays) * (1 - zoomFactor);

 

     // Set the zoom position for the x-axis

    zoomPosition = zoomPosition < 0 ? 0 : zoomPosition > 1 ? 1 : zoomPosition;

 

     AnimateZoomPosition(XAxis.ZoomPosition, zoomPosition, TimeSpan.FromSeconds(1));

 }

 

 async void AnimateZoomPosition(double startPosition, double endPosition, TimeSpan duration)

 {

     // Number of animation steps

     int steps = 60;

 

     // Calculate the time delay between each step

     double timeStep = duration.TotalMilliseconds / steps;

 

     // Calculate the change per step

     double stepSize = (endPosition - startPosition) / steps;

 

     // Perform the animation in small increments

     for (int i = 0; i < steps; i++)

     {

         // Increment the zoom position

         startPosition += stepSize;

 

         // Update the chart's zoom position

         XAxis.ZoomPosition = startPosition;

 

         // Wait for the next frame

         await Task.Delay((int)timeStep);

     }

 

     // Ensure the final position is set

     XAxis.ZoomPosition = endPosition;

 }


If you need further assistance or have any questions, feel free to reach out.


Thank you for your patience and understanding.


Regards,

ARUL JENITH B.


Attachment: ScrollSupportSample_18c85abc.zip

Loader.
Up arrow icon