Disable autoscrolling during panning to old values

Hello Syncfusion team,

I have a SFChart (Xamarin.iOS control) for my very important project that shows a series of values horizontally.
The data is not fixed but it "increases" every second along the X axis (see it as a real time plot of values along time).
I set AutoScrollingDelta="10" and AutoScrollingMode="End", I ensure that the most recent data is always visible (the most recent value is always plotted on the right edge).
Now I decided to activate the Panning functionality, so that the user can scroll to left and check the older values while new data continues to be added.


The problem is
that the user pans, but immediately the view returns back to the most recent values, I assume due to the AutoScroll.


I have attached my small demo project to describe this issue in attachment.

Could you please show me how to keep scrolling to left side to view old data points while still keeping live data?
(It will be really nice if you can give me a working example for this issue)

Many thanks and hope to hear from you ASAP,


Attachment: ChartDemo_49707e39.zip


11 Replies

DD Devakumar Dhanapoosanam Syncfusion Team November 22, 2021 11:18 AM UTC

Hi Dang Manh Duc, 
 
Greetings from Syncfusion. 
 
Query: Could you please show me how to keep scrolling to left side to view old data points while still keeping live data? 
 
We have analyzed your query and we can achieve your requirement by setting the AutoScrollingDelta value as double.NaN while panning to disable auto scrolling to see the old values using the SFChartDelegate DidPan delegate method and we can enable the AutoScrollingDelta value in a button click event to auto scroll the live data. Please refer the below code example. 
 
chart.Delegate = new ChartDelegate(); 

private
void Button_TouchUpInside(object sender, EventArgs e) 
{ 
    chart.PrimaryAxis.AutoScrollingDelta = 10; 
} 
 
public class ChartDelegate : SFChartDelegate 
{ 
    public override void DidPan(SFChart chart, SFChartPanInfo info) 
    { 
        info.Axis.AutoScrollingDelta = double.NaN; 
    } 
} 
 
 
 
Note: Also, we would like to let you know that when enable both AutoScrollingDelta and live update data after panning auto scroll will update to new data point added. We can pan chart in live update by pausing the live update data point adding while panning or by disabling the AutoScrollingDelta.  
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Devakumar D 



DM Dang Manh Duc November 22, 2021 06:13 PM UTC

Hi Devakumar Dhanapoosanam,
CC: Syncfusion team,

Firstly, thank you so much for your support.

I have another problem:


My x-axis is a Category axis which its label is formatted as DateTime with "mm:ss". How can I force x-axis always display 7 datetime points during live data?
NOTE: Live data intervals are not equal. Ex: Live data is coming as 05:11 <-- 05:15 <-- 05:17 <-- 05:25 <-- 05:26.

Please modify my attachment to show me an example of that.

Many thanks and hope to hear from you soon.

Attachment: ChartDemo2_d80a595d.zip


DD Devakumar Dhanapoosanam Syncfusion Team November 24, 2021 03:02 AM UTC

Hi Dang Manh Duc, 
 
Thanks for the update. 
 
Currently we are analyzing the feasibility to achieve your requirement at our end based on the provided sample and we will update the complete details on November 24, 2021 before EOD. 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team November 25, 2021 01:59 AM UTC

Hi Dang Manh Duc, 
 
Still, we are working on your requirement with high priority and need some more time achieve your requirement and we will update the complete details on November 25, 2021. 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team November 25, 2021 10:11 AM UTC

Hi Dang Manh Duc, 
 
Thanks for your patience. 
 
We have achieved your requirement using CategoryAxis with the provided sample to always display 7 axis labels in live update. Please refer below code example. 
 
SFCategoryAxis primaryAxis = new SFCategoryAxis(); 
primaryAxis.ShowMajorGridLines = false; 
primaryAxis.AutoScrollingDelta = 6; 
primaryAxis.AutoScrollingMode = ChartAutoScrollingMode.End; 
primaryAxis.Interval = new NSNumber(1); 
 
 
private void ChartDelegate_PanAction(SFChartPanInfo panInfo) 
{ 
    isScrolling = true; 
 
    var range = chart.PrimaryAxis.VisibleRange; 
    var end = range.End; 
    var count = dataModel.Count - 1; 
 
    //Start scrolling afer panning again right end when reach near last before index 
    if (end >= count - 2) 
    { 
        isScrolling = false; 
    } 
} 
 
Please find the modified sample from below link. 
 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Devakumar D 



DM Dang Manh Duc replied to Devakumar Dhanapoosanam November 25, 2021 03:51 PM UTC

HiSuggest a reply Devakumar Dhanapoosanam,


Thank you so much for your instant support.

It works like a charm. Really nice...!


But I have a small concern that why the left most label of x-axis is sometimes blinking during live-data?

(Please my attached screen recording for more details)

Could you please help me clarify this and show me how to fix it this?


Regards,

Duc Dang Manh


Attachment: xaxis_lable_blinking.mov_94e5eb00.zip



DD Devakumar Dhanapoosanam Syncfusion Team November 29, 2021 02:49 AM UTC

Hi Dang Manh Duc, 
 
Thanks for your update. 
 
Query: But I have a small concern that why the left most label of x-axis is sometimes blinking during live-data? 
 
We have analyzed reported query at our end, and we would like to let you know that during live update with auto scrolling the axis labels at edges may hides some points or does not render with our current chart behavior. Also, we would like to suggest placing axis labels using LabelPlacement BetweenTicks to show all labels but note it hides the tick lines at left most label.  
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Devakumar D 



DM Dang Manh Duc replied to Devakumar Dhanapoosanam November 30, 2021 01:04 AM UTC

Hi Devakumar Dhanapoosanam,
CC: Syncfusion team,


After some testing with your provided modified on my previous Chart sample, I detect an urgent problem which related to the scrolling to view history of live-data of the Chart as following:

Source code of sample is in attachment.

Steps to reproduce:

- Step 1: Extract my below attached sample and start the sample app.

- Step 2: Wait for a while to let the chart live-data for about 20 seconds (just to make sure we have more data in history).

- Step 3: Scroll to the left side to view history => The chart will immediately stop live-data.

- Step 4: Scroll back to the right side (when it reaches latest data point).

Issue:

- When the chart.PrimaryAxis.VisibleRange.End reaches the latest data point on the right side, the chart does NOT draw new data point anymore. I always have to single touch on the chart to make it live-data back to work.


Note that, I did not check your previous suggested following code:

//Start scrolling afer panning again right end when reach near last before index

if (end < count - 2){ .... }

because we will not see the live-data resume again when scrolling reach to points near the above point on the right side.


Please help me fix this issue right into my sample.


Many thanks,

Duc Dang Manh


Attachment: ChartPanGestureIssue_82bcb705.zip



DD Devakumar Dhanapoosanam Syncfusion Team December 1, 2021 10:15 AM UTC

Hi Dang Manh Duc, 
 
We were able to reproduce the reported problem using the provided sample at our end. Currently we are validating this at our end, and we will update you the complete details on or before December 2, 2021. We appreciate your patience until then. 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team December 4, 2021 02:31 AM UTC

Hi Dang Manh Duc, 
 
Still, we are working on this with high priority at our end and need some more time to find feasible solution for the reported problem and will update further details on December 6, 2021. Sorry for the inconvenience caused. 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team December 6, 2021 10:09 AM UTC

Hi Dang Manh Duc, 
 
Thanks for your patience. 
 
We can resolve the reported problem by updating the axis AutoScrollingDelta value and we have modified the sample code to find the panning reach the last data using the axis ZoomFactor and ZoomPosition. Please refer the below code example. 
 
private void ChartDelegate_PanAction(SFChartPanInfo panInfo) 
{ 
    //Start scrolling afer panning again right end when reach near last before index 
    if (Math.Round((1 - panInfo.Axis.ZoomFactor), 3) == Math.Round(panInfo.Axis.ZoomPosition, 3)) 
    { 
        Console.WriteLine("REACH !!! LIVE-DATA RESUME"); 
        dataModel.IsLiveDataEnabled = true; 
        panInfo.Axis.AutoScrollingDelta = 6; 
    } 
    else 
    { 
        Console.WriteLine("LIVE-DATA SUSPENDED"); 
        dataModel.IsLiveDataEnabled = false; 
        panInfo.Axis.AutoScrollingDelta = double.NaN; 
    } 
} 
 
Please find the modified sample from the below link. 
 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Devakumar D 


Loader.
Up arrow icon