Chart blocks app in UWP after a while, delays the show up in Android, but in the same time seems to work fine in iOS

I am drawing a graph of a time dependent activity which has to monitored indefinitely, if user is choosing so. The app is tested in UWP, Android and iOS, same base code. In UWP after a while (could be minutes, but hours too) the application is sort of hung up, meaning that you can first see it drawing lines with big breaks in between chunks drawn at once, and then after some time everything freezes (is even impossible to move the app windows on the desktop). You cannot exit normally from the app in this final phase, you can only click the upper right cross button to close it. In Android everything seems to work fine apart of a delay to show the form containing the chart (in UWP this delay does not exist). After this initial freeze of few seconds I tested the continuous drawing of the values for many hours, much longer time than in the UWP, and did not freeze. In iOS, neither initial delay to show up the form, nor the freezing app issue seems to be present, as long as I could conclude in my testing.

The AddPointOnGraph function presented in the attached file is called from a separate (working)thread. ZoomByRange chart function is used to shift the drawing left when the drawing approaches the right limit. From time to time the chart is cleared and new cycle of drawing is started over. I am using 5 minutes window to present data to the user and after 1 hour I am clearing the chart with Clear() call, as you can deduce from the code. 
Chart initialization: (C#)
            dateTimeAxis.IntervalType = DateTimeIntervalType.Seconds;
            dateTimeAxis.Interval =  25;
            dateTimeAxis.EnableAutoIntervalOnZooming = true;
            dateTimeAxis.ShowMajorGridLines = true;
            dateTimeAxis.ShowMinorGridLines = true;
            dateTimeAxis.MinorTicksPerInterval = 4;
            dateTimeAxis.LabelRotationAngle = -15;
(XAML)
                <chart:SfChart x:Name="Chart" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" Margin="0" BackgroundColor="#f5edd8"
                            HeightRequest="{x:OnPlatform Android={x:OnIdiom Tablet=270,Phone=130},iOS={x:OnIdiom Tablet=360,Phone=130},UWP={x:OnIdiom Desktop=594,Phone=92}}">
                    <chart:SfChart.PrimaryAxis ItemMargin="0">
                        <chart:DateTimeAxis x:Name="dateTimeAxis" RangePadding="None">
                            <chart:DateTimeAxis.LabelStyle>
                                <chart:ChartAxisLabelStyle Margin="1" FontSize="{x:OnPlatform Android={x:OnIdiom Tablet=7,Phone=7},iOS={x:OnIdiom Tablet=7,Phone=7},UWP={x:OnIdiom Desktop=9,Phone=7}}" LabelFormat="{}HH:mm:ss"/>
                            </chart:DateTimeAxis.LabelStyle>
                        </chart:DateTimeAxis>
                    </chart:SfChart.PrimaryAxis>
                    <chart:SfChart.SecondaryAxis Title="...">
                        <chart:NumericalAxis Minimum="-110" Maximum="0" Interval="10" ShowMajorGridLines="True" ShowMinorGridLines="True" CrossesAt="110" MinorTicksPerInterval="4" RangePadding="None">
                            <chart:NumericalAxis.Title>
                                <chart:ChartAxisTitle Text=".. level (in ..)" FontSize="{x:OnPlatform Android={x:OnIdiom Tablet=7,Phone=7},iOS={x:OnIdiom Tablet=7,Phone=7},UWP={x:OnIdiom Desktop=9,Phone=7}}"/>
                            </chart:NumericalAxis.Title>
                            <chart:NumericalAxis.LabelStyle>
                                <chart:ChartAxisLabelStyle FontSize="{x:OnPlatform Android={x:OnIdiom Tablet=7,Phone=7},iOS={x:OnIdiom Tablet=7,Phone=7},UWP={x:OnIdiom Desktop=9,Phone=7}}" LabelFormat="{}0.00"/>
                            </chart:NumericalAxis.LabelStyle>
                        </chart:NumericalAxis>
                    </chart:SfChart.SecondaryAxis>

                    <chart:FastLineSeries x:Name="..SSeries" Label="..S" ItemsSource ="{Binding Graph}" XBindingPath="EventTime" YBindingPath="..LevelS" EnableTooltip="True"/>
                    <chart:FastLineSeries x:Name="..1Series" Label="..1" ItemsSource ="{Binding Graph}" XBindingPath="EventTime" YBindingPath="..Level1" EnableTooltip="True"/>
                    <chart:FastLineSeries x:Name="..2Series" Label="..2" ItemsSource ="{Binding Graph}" XBindingPath="EventTime" YBindingPath="..Level2" EnableTooltip="True"/>
                    <chart:FastLineSeries x:Name="..3Series" Label="..3" ItemsSource ="{Binding Graph}" XBindingPath="EventTime" YBindingPath="..Level3" EnableTooltip="True"/>
                    <chart:SfChart.ChartBehaviors>
                        <chart:ChartZoomPanBehavior x:Name="ZoomPan"/>
                    </chart:SfChart.ChartBehaviors>

                    <chart:SfChart.Legend>
                        <chart:ChartLegend ToggleSeriesVisibility="True" OffsetY="0" ItemMargin="0">
                            <chart:ChartLegend.LabelStyle>
                                <chart:ChartLegendLabelStyle TextColor="Blue" Margin="1" Font="{x:OnPlatform Android={x:OnIdiom Tablet='Bold,10',Phone='Bold,10'}, iOS={x:OnIdiom Tablet='Bold,10',Phone='Bold,8'},UWP={x:OnIdiom Desktop='Bold,14',Phone='Bold,12'}}"/>
                            </chart:ChartLegend.LabelStyle>
                        </chart:ChartLegend>
                    </chart:SfChart.Legend>
                </chart:SfChart>

Some of the FastLineSeries could become hidden, depending of the configuration, but I could not relate to this any of the reported behaviors. 

That's all folks.
Thank you

Attachment: addPoint_96274cc3.rar

17 Replies

DD Devakumar Dhanapoosanam Syncfusion Team May 18, 2020 12:32 PM UTC

Hi Constantin, 
 
Greetings from Syncfusion. 
 
We have analyzed the reported query and the provided code snippet. Based on the provided details it is difficult for us to understand your exact issue and complex to check at our end with the provided code snippet file. 
 
Can you please share more details such as the complete chart related code snippet along with the ViewModel code which will be helpful for us to analyze the reported issue at our end or can you please share a simple sample if possible? 
 
Regards, 
Devakumar D 



CO Constantin May 18, 2020 04:39 PM UTC

It is difficult to reproduce here the whole context because this is a very complex application. What I can provide you to better understand is the context in which chart is working to plot the lines. So, you have a new code snippet with the async loop in which a ConcurrentQueue is periodically read and values extracted are in the end reaching the Graph object in AddPointOnGraph function:

                try
                {
                    _info.Graph.Add(lastii);
                }
                catch (Exception e)
                {
                    String uimessage = "AddPointOnGraph: Graph.Add failed " + e.Message;
                    App.AuditMsgUpdList.Enqueue(new AuditMsgUIupdateList(uimessage, Definitions.MSGTYPE_SYSTEMERROR, Definitions.MSGCODE_MISCELLANEOUS, lastii.SessionID));
                }
Inside the AddPointOnGraph function comparisons occur to detect if the lines ploted are near to the right end of the drawing surface. When 95% of the drawing space is filled in then 
                        try
                        {
                            ZoomPan.ZoomByRange(dateTimeAxis, MinTime, MaxTime);
                        }
                        catch (Exception e)
                        {
                            uimessage = "AddPointOnGraph: ZoomByRange failed " + e.Message;
                            App.AuditMsgUpdList.Enqueue(new AuditMsgUIupdateList(uimessage, Definitions.MSGTYPE_SYSTEMERROR, Definitions.MSGCODE_MISCELLANEOUS, lastii.SessionID));
                        }

is called to move the whole plotting to the left. From this point in time on 
                        try
                        {
                            _info.Graph.RemoveAt(0);
                        }
                        catch (Exception e)
                        {
                            uimessage = "AddPointOnGraph: Graph.Remove failed " + e.Message;
                            App.AuditMsgUpdList.Enqueue(new AuditMsgUIupdateList(uimessage, Definitions.MSGTYPE_SYSTEMERROR, Definitions.MSGCODE_MISCELLANEOUS, lastii.SessionID));
                        }
the oldest values are removed from the Graph object to spare memory, as this process could last indefinitly.

'_info' object is defined as:
        public static Info _info = null;
on top of the .cs
'Info' object is defined as:
    public classInfo : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public Info(Sessions session)
        {
            Session = session;
            LocateModeStatus = 0;
            ApGraph = new ObservableCollection<ApLOCdata>();
        }
        public Sessions Session { get; set; }
        private Int16 _modestatus;
        public Int16 ModeStatus
        {
            get { return _modestatus; }
            set
            {
                if (_modestatus == value) return;
                _modestatus = value;
                OnPropertyChanged();
            }
        }
        public ObservableCollection<data> Graph { get; set; }
        private void OnPropertyChanged([CallerMemberName] String propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
and the 'data' object is defined as follows:
public class data
    {
        public event PropertyChangedEventHandler PropertyChanged;
        [Column("ID"), PrimaryKey, AutoIncrement, NotNull]
        public int Id { get; set; }
       
        private DateTime _eventtime;
        [Column("EventTime")]
        public DateTime EventTime
        {
            get { return _eventtime; }
            set
            {
                if (_eventtime == value) return;
                _eventtime = value;
                OnPropertyChanged();
            }
        }
        private Int16 _Levels;
        [Column("LevelS"), NotNull]
        public Int16 LevelS
        {
            get { return _Levels; }
            set
            {
                if (_Levels == value) return;
                _Levels = value;
                OnPropertyChanged();
            }
        }
        private Int16 _Level1;
        [Column("Level1"), NotNull]
        public Int16 Level1
        {
            get { return _Level1; }
            set
            {
                if (_Level1 == value) return;
                _Level1 = value;
                OnPropertyChanged();
            }
        }
        private Int16 _Level2;
        [Column("Level2"), NotNull]
        public Int16 Level2
        {
            get { return _Level2; }
            set
            {
                if (_Level2 == value) return;
                _Level2 = value;
                OnPropertyChanged();
            }
        }
        private Int16 _Level3;
        [Column("Level3"), NotNull]
        public Int16 Level3
        {
            get { return _Level3; }
            set
            {
                if (_Level3 == value) return;
                _Level3 = value;
                OnPropertyChanged();
            }
        }
        private Int16 _angle;
        [Column("Angle")]
        public Int16 Angle
        {
            get { return _angle; }
            set
            {
                if (_angle == value) return;
                _angle = value;
                OnPropertyChanged();
            }
        }
        private vsdAAngleReliability _reliable;
        [Column("Reliable")]
        public vsdAAngleReliability Reliable
        {
            get { return _reliable; }
            set
            {
                if (_reliable == value) return;
                _reliable = value;
                OnPropertyChanged();
            }
        }
        [Column("SessionID"), ForeignKey(typeof(Sessions))]
        public Int32 SessionID { get; set; }
        [ManyToOne(CascadeOperations = CascadeOperation.CascadeRead | CascadeOperation.CascadeInsert)]
        public Sessions Session { get; set; }
        private void OnPropertyChanged([CallerMemberName] String propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
I hope these will be helpful for your analysis. 


Attachment: addPoint_c3dafe1c.rar


SJ Suyamburaja Jayakumar Syncfusion Team May 19, 2020 06:09 PM UTC

  
Hi Constantin,  
  
Thanks for sharing the code snippet.  
  
We are currently analyzing the reported issue based on the code snippet details at our end and we will update the details on May 21, 2020.  
  
Regards,  
Suyamburaja J 



DD Devakumar Dhanapoosanam Syncfusion Team May 21, 2020 07:58 PM UTC

Hi Constantin, 
 
Still we need some more time and we will update you the details on May 22, 2020. 
 
Meanwhile can you please share the iOS, Android and UWP sample chart video/gif of your application for reference if possible, which will be helpful for us to analyze at our end? 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team May 25, 2020 11:25 AM UTC

Hi Constantin, 
 
Sorry for the delay. 
 
We have prepared a simple sample by adding the chart data points and removing the points after some time based on the range when exceeds and the chart loads proper in all platform. 
 
Please download the sample from the below link, 
 
Could you please check the above sample and let us know whether you are facing any issue or not?  
 
Also, we would like to share the below steps to optimize the chart performance for live data, 
 
·       We can able to hold the chart from updating of each data added to the collection, using SuspendSeriesNotification and ResumeSeriesNotification methods in chart control, the chart will not respond to any change in the items source collection after the SuspendSeriesNotification method is invoked. It will be updated with latest data after the ResumeSeriesNotification method is invoked. 
·       Try to remove the data which is not visible in view.  
·       Try adding bulk data instead of adding single data points with some delay. 
·       Try to update the collection in background thread instead of updating in UI main thread. 
·       Set the StrokeWidth of FastLineSeries to “1” by default its value is 2.  
·       Set the EnableAntiAliasing property as false for FastLineSeries, FastScatterSeries 
 
C#:  
public class ViewModel  
{  
        ….  
        public Action BeginDataUpdate;  
        public Action EndDataUpdate;  
}  
  
public partial class MainPage : ContentPage  
{  
        ViewModel viewModel;  
        ….  
        public MainPage()  
        {  
            InitializeComponent();  
  
            viewModel = new ViewModel();  
            this.BindingContext = viewModel;  
  
            viewModel.BeginDataUpdate = () => chart.SuspendSeriesNotification();  
            viewModel.EndDataUpdate = () => chart.ResumeSeriesNotification();  
        }  
        ….  
        public async void LoadData()  
        {  
                await Task.Delay(500);  
                 //dynamic change data using suspend and resume   
                 Device.BeginInvokeOnMainThread(() =>  
                 {  
                        //chart.SuspendSeriesNotification() is called when using below code.  
                        viewModel.BeginDataUpdate();  
  
                         for (int i = 0; i < 128; i++)  
                         {  
                               //Add Data  
                         }  
                         //chart.ResumeSeriesNotification() is called when using below code.  
                         viewModel.EndDataUpdate();   
                  });   
               ….  
         }  
}  
  
 
 
If the above suggested solution doesn’t resolve the reported issue, can you please modify the above sample to replicate the issue if possible, which will be helpful for us to analyze the reported issue? 
 
Regards, 
Devakumar D 



CO Constantin May 26, 2020 06:07 AM UTC

Hi Devakumar,

I ran the sample provided in Visual Studio Debug Mode and after few hours ended stuck with 2GB of memory consumed. This is the usual behaviour I observed with my application too, when running in Debug. I will test also with production deployment and let you know. On the first tens of minutes when I actively watched the test the movement on the screen became slower and slower as time

passed by. One comment on this sample: although the EnableAutoIntervalOnZooming was set to true, it is not used for translation in my application as is not satisfactory. I use ZoomByRange to move the create the sensation that the window is moved back at once with 60% of the screen width. In fact later, in my code I set this parameter to false. SuspendSeriesNotification and ResumeSeriesNotification were used  in the past but with poor results and they are of no practicality as the value are pushed to the screen from time to time (say 1 second) not in bulks with long time periods of inactivity.

Comments on the other suggestions:

·       Try to remove the data which is not visible in view.  

I do this constantly, only one or two maybe are present on the left

·       Try adding bulk data instead of adding single data points with some delay. 

This is not the kind of application which can do that. Values must be displayed the very second are available

·       Try to update the collection in background thread instead of updating in UI main thread. 

Of course, I remember that I sent you the code with the background thread

·       Set the StrokeWidth of FastLineSeries to “1” by default its value is 2.  

·       Set the EnableAntiAliasing property as false for FastLineSeries, FastScatterSeries 

 ?????? I don’t understand the relationship with the observed issue

On the other hand, with Android I managed to observe for very few fractions of seconds that initially the chart displays 24 hours on datetimeaxis, not the interval indicated. Once I think I observed this phenomenon also in UWP.

If you provide me a Direct trac Channel I can show you a movie with the slow response of the application in Android when initially loading the form (delay on loading the form containing the chart)



CO Constantin May 26, 2020 07:09 AM UTC

Concerning 24 hours initial display: if you mis to set datetimeaxis Minimum and Maximum in the constructor of the form, then automatically 24 hours interval is used and in Android this causes 5-10 seconds delay on loading the form. I set some values and delay disapeared. 



DD Devakumar Dhanapoosanam Syncfusion Team May 27, 2020 04:23 PM UTC

Hi Constantin, 
 
Thanks for your update. 
 
We were currently analyzing the reported issue “memory increasing after some time” in UWP and we will update you the complete details on May 28, 2020.  
 
And we are glad to know that you have resolved the initial delay for loading chart in android. 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team May 28, 2020 04:17 PM UTC

Hi Constantine, 
 
Still we are need some more time to provide a feasible solution to resolve the reported issue in uwp and we will update you the details on May 29, 2020. 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team May 29, 2020 02:20 PM UTC

Hi Constantin, 
 
We have tried to resolve this through workaround and working on workaround we faced some technical blocks. Hence, we need some more time to ensure and work it and will update you the complete details on June 2, 2020. Sorry for the delay. 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team June 2, 2020 04:30 PM UTC

Hi Constantin,  
 
Sorry for the delay. 
 
Still we are facing some difficulties and need more time to validate the feasible solution and we will update you the details on June 4, 2020. 
 
Regards,  
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team June 4, 2020 01:52 PM UTC

Hi Constantin, 
 
Sorry for the continuous delay. We were facing some technical difficulties at our end and we are working on this with high priority for providing feasible solution to optimize the chart performance and we will update you the solution on June 9, 2020. 
 
We appreciate your patience until then. 
 
Regards, 
Devakumar D 



DD Devakumar Dhanapoosanam Syncfusion Team June 9, 2020 01:56 PM UTC

Hi Constantin, 
 
Thanks for your patience. 
 
We can improve the chart performance by using the axis RangeStyles LabelStyle property instead of the axis LabelStyle and we would like to request updating the SfChart version to 18.1.0.56 for optimizing the chart performance. 
 
Also, we would like to let you know that we can set the range for the axis RangeStyle Start property by using the axis VisibleMinimum or axis Minimum and the range will be applied for the entirely from the Start value as per in the below code snippet for the live update, 
 
XAML: 
<chart:SfChart.PrimaryAxis ItemMargin="0"> 
     <chart:DateTimeAxis x:Name="dateTimeAxis" RangePadding="None" 
                                AutoScrollingDelta="100" AutoScrollingDeltaType="Seconds" 
                                IsVisible="True" ActualRangeChanged="DateTimeAxis_ActualRangeChanged" >                 
            <chart:DateTimeAxis.RangeStyles> 
                    <chart:ChartAxisRangeStyleCollection> 
                        <chart:ChartAxisRangeStyle x:Name="dateTimeRangeStyle"> 
                            <chart:ChartAxisRangeStyle.LabelStyle> 
                                <chart:ChartAxisLabelStyle TextColor="Red" Margin="1"  
                                     FontSize="{x:OnPlatform Android={x:OnIdiom Tablet=7,Phone=7}, 
                    iOS={x:OnIdiom Tablet=7,Phone=7},   UWP={x:OnIdiom Desktop=9,Phone=7}}"          
                                     LabelFormat="HH:mm:ss"/> 
                            </chart:ChartAxisRangeStyle.LabelStyle> 
                        </chart:ChartAxisRangeStyle> 
                    </chart:ChartAxisRangeStyleCollection> 
            </chart:DateTimeAxis.RangeStyles> 
     </chart:DateTimeAxis> 
</chart:SfChart.PrimaryAxis> 
 
<chart:SfChart.SecondaryAxis> 
     <chart:NumericalAxis x:Name="secAxis" Minimum="-110" Maximum="0" Interval="10"  
                                 ShowMajorGridLines="True"  ShowMinorGridLines="True"  
                                 CrossesAt="110" MinorTicksPerInterval="0"  
                               RangePadding="None" IsVisible="True">  
         ….. 
          <chart:NumericalAxis.RangeStyles> 
                    <chart:ChartAxisRangeStyleCollection> 
                        <chart:ChartAxisRangeStyle Start="-110" End="0"> 
                            <chart:ChartAxisRangeStyle.LabelStyle> 
                                <chart:ChartAxisLabelStyle TextColor="Blue" 
                                    FontSize="{x:OnPlatform Android={x:OnIdiom Tablet=7,Phone=7}, 
                                                   iOS={x:OnIdiom Tablet=7,Phone=7}, 
                                                   UWP={x:OnIdiom Desktop=9,Phone=7}}" LabelFormat="0.00"/> 
                            </chart:ChartAxisRangeStyle.LabelStyle> 
                        </chart:ChartAxisRangeStyle> 
                    </chart:ChartAxisRangeStyleCollection> 
          </chart:NumericalAxis.RangeStyles> 
     </chart:NumericalAxis> 
</chart:SfChart.SecondaryAxis> 
 
C#: 
 
public MainPage() 
{ 
       InitializeComponent(); 
       dateTimeAxis.IntervalType = DateTimeIntervalType.Seconds; 
       dateTimeAxis.Interval = 5; 
       dateTimeAxis.EnableAutoIntervalOnZooming = true; 
       dateTimeAxis.ShowMajorGridLines = true; 
       dateTimeAxis.ShowMinorGridLines = true; 
       dateTimeAxis.MinorTicksPerInterval = 4; 
       dateTimeAxis.LabelRotationAngle = -15; 
 
       dateTimeAxis.LabelStyle = null; 
       secAxis.LabelStyle = null; 
} 
... 
private void DateTimeAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 
{ 
       dateTimeRangeStyle.Start = e.ActualMinimum; 
} 
 
 
Please refer the below UG link for more details, 
 
 
Please let us know if you need any further assistance on this. 
 
Regards,  
Devakumar D 



CO Constantin June 30, 2020 05:41 AM UTC

Hello Devakumar D

I didn't heard news from you from a while now. In the meantime I tested extensively the chart and the conclusions are in short I’m suspecting an error in UWP version which causes a stack overflow which in turn causes either blocking or sudden crashes. This is based on observations on long drawing times (over a day long for Android and iOS) which in Windows can not be achieved in any circumstances. Depending on instance of Windows crashes will occur after few minutes or few hours, 7 at most. The same code put on iPhone, iPad, Android tablets or phones is working smoothly.



DD Devakumar Dhanapoosanam Syncfusion Team July 2, 2020 04:11 AM UTC

Hi Constantin, 
 
Can you please confirm us whether you have tested the suggested solution for UWP updated on June 9, 2020 01:56 PM UTC at your end with the latest SfChart NuGet version? 
 
Regards, 
Devakumar D 



CO Constantin July 8, 2020 07:16 AM UTC

Hi guys

I could not make the RangeStyles code to work properly. First the displayed window shows datetimes aprox. 1 hour ahead of the current time. Even when I waited 1 hour nothing was drawn on the screen. On the other hand, how this code is supposed to work? It will shift the graph left on each plot action? In this case it is not suitable for my application as I need to shift 40 % of the screen to left at once (not in a constant move) as the user has to be able to focus to the graphic shape. 
I'm repeating myself about the error. UWP only has problems. Extensive testing in Android and iOS shows no error. In UWP either blocks or crashes. I managed to get stack overflow in Visual Studio when testing UWP in debug mode. It is a first for me to see stack overflow in Visual Studio.

Yours 
Costin


DD Devakumar Dhanapoosanam Syncfusion Team July 10, 2020 02:44 AM UTC

Hi Constantin, 
 
Thanks for your update.   
 
Under your account, we have created a support incident to track the status of this reported issue   
   
Please log on to our support website to check for further updates.   
   
 
Regards, 
Devakumar D 


Loader.
Up arrow icon