Empty chart is displayed for a brief moment when binding data is updated

Question

Hi,I'm trying to display arbitrary number of charts using ItemsControl, using UniformGrid as ItemsPanelTemplate.When I update the data which is bound to ItemsSource of the ItemsControl, all of the SfChart show empty data for a brief moment, then show actual correct data.It looks as if SfChart get redraw twice, first when the data is cleared, second when actual data is set.But my code is just replacing the whole data when a new data set is ready, never calls collection's Clear() method.The attachment is the xaml for the UserControl.You can see the empty chart more obviously if you change the FastLineBitmapSeries to FastLineSeries.Thanks in advance.

Yuvaraj Palanisamy · Answer

Hi Masao Kawamura, Greetings from Syncfusion. We have analyzed your query and we have prepared the sample with adding chart as a UniformGrid ItemTemplate. And I have dynamically clear or update the bounded ItemsSource property and it was working fine as expected. Please find the code example below. CodeSnippet: [UserControl.xaml]

clintk · Answer

Hi 
Yuvaraj,Thank you for your sample code.Indeed your code works flawlessly, if I change Button_Click_1() in UserControl1.xaml.cs in your code as follows, it shows empty plot for a brief moment. This is similar to what my code does.Note:  You would also need to change the chart series to FastLineSeries in xaml. FastLineBitmapSeries would be too fast to see the empty plot.        private void Button_Click_1(object sender, RoutedEventArgs e)        {            Random random = new Random();            (DataContext as ViewModel).RootData.Clear();            for( int c = 0; c < 4; c++ ) {                var cd = new ObservableCollection<Model>();                for( int i = 0; i < 2000; i++ ) { // Data point must be large enough                    var value = random.Next( 0, 100 );                    cd.Add( new Model( i + 40000, value ) );                };                (DataContext as ViewModel).RootData.Add( new ChartViewModel() { Data = cd } );            }        }In my app, because the number of plots to be displayed changes dynamically, I don't think I can pre-allocate the collections and reuse them. If you know any workaround for this, it would be much appreciated.Regards,

Yuvaraj Palanisamy · Answer

Hi ChandraPrakash, 
 
Greetings from Syncfusion.  
  
We have checked your query and prepared a sample for adding a ‘Login Page’ in the Xamarin.Forms application by using Syncfusion Essential UI Kit extension and it was working fine at our end. Please find the sample from the below link.  
 
  
Sample:  https://www.syncfusion.com/downloads/support/forum/168508/ze/LoginPageTemplate1997558989  
   
Output:  
    
  
And you can get the UI Kit source code from the below github link.  
https://github.com/syncfusion/essential-ui-kit-for-xamarin.forms   
  
Also, you can get the UI Kit visual studio extension for Windows and MAC from the below link.  
https://www.syncfusion.com/essential-xamarin-ui-kit   
  
For more details, please refer the below link  
https://help.syncfusion.com/xamarin/uikit/gettingstarted   
  
Please let us know if you have any concern.  
  
Regards,  
Yuvaraj

clintk · Answer

Hi Yuvaraj,I think you posted your reply to wrong thread.Please check.

Yuvaraj Palanisamy · Answer

Hi Masao Kawamura,  
 
Sorry for the inconvenience. Please ignore the previous update. 
 
We have analyzed your query and we would like to suggest that use SuspendSeriesNotification and ResumeSeriesNotification for dynamic update scenario. Please find the following code example. 
 
CodeSnippet: 





private void Button_Click_1(object sender, RoutedEventArgs e) 
{ 
    Random random = new Random(); 
    for (int i = 0; i < User.Items.Count; i++) 
    {                 
        var container = User.ItemContainerGenerator.ContainerFromIndex(i); 
        var chart = (container as ContentPresenter).ContentTemplate.LoadContent() as SfChart;  
        chart.SuspendSeriesNotification();   
    } 
 
    (DataContext as ViewModel).RootData.Clear(); 
    for (int c = 0; c < 4; c++) 
    { 
        var cd = new ObservableCollection<Model>(); 
        for (int i = 0; i < 2000; i++) 
        { // Data point must be large enough 
            var value = random.Next(0, 100); 
            cd.Add(new Model(i + 40000, value)); 
        }; 
        (DataContext as ViewModel).RootData.Add(new ChartViewModel() { Data = cd }); 
    } 
 
    for (int i = 0; i < User.Items.Count; i++) 
    { 
        var container = User.ItemContainerGenerator.ContainerFromIndex(i); 
        var chart = (container as ContentPresenter).ContentTemplate.LoadContent() as SfChart; 
        chart.ResumeSeriesNotification(); 
    } 
}  
 
Also, we have attached the sample for your reference. Please find the sample from the below link. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/168508/ze/Sample_Modified103503827  
  
For more details, please refer the below link. 
https://help.syncfusion.com/wpf/charts/performance  
 
Regards, 
Yuvaraj.

clintk · Answer

Hi Yuvaraj,Thank you for the info about Suspend/ResumeSeriesNotification().As my app is based on Prism MVVM framework, all plot data are managed by a ViewModel class, from which I can't access the view (SfChart).So I defined a SfChart subclass, which has DependencyProperty to call those methods by bindings: public class SfChartEx : SfChart { public SfChartEx() : base() { SuspendSeriesNotification(); } public static readonly DependencyProperty SuspendUpdateProperty = DependencyProperty.Register( "SuspendUpdate", typeof( bool ), typeof( SfChartEx ), new PropertyMetadata( true, new PropertyChangedCallback( SuspendUpdatePropertyChanged ) ) ); public bool SuspendUpdate { get { return (bool)GetValue( SuspendUpdateProperty ); } set { SetValue( SuspendUpdateProperty, value ); } } private static void SuspendUpdatePropertyChanged( DependencyObject obj, DependencyPropertyChangedEventArgs args ) { if( (bool)args.NewValue == true ) { (obj as SfChart).SuspendSeriesNotification(); } else { (obj as SfChart).ResumeSeriesNotification(); } } }I modified the SfChart part of the xaml:For test, I added a boolean property named ChartUpdateSuspended to your sample ViewModel class, and modified to update the plot data every 3 seconds using timer:public class ViewModel : INotifyPropertyChanged{ public ObservableCollection RootData { get; set; } public ObservableCollection ChartData { get; set; } public ObservableCollection ChartData1 { get; set; } public ObservableCollection ChartData2 { get; set; } public ObservableCollection ChartData3 { get; set; } public ObservableCollection Data1 { get; set; } private DispatcherTimer timer; public int RowCount { get; set; } public int ColumnCount { get; set; } private bool _chartUpdateSuspended; public bool ChartUpdateSuspended { get { return _chartUpdateSuspended; } set { _chartUpdateSuspended = value; RaisePropertyChanged( nameof( ChartUpdateSuspended ) ); } } public ViewModel() { RootData = new ObservableCollection(); ChartData = new ObservableCollection(); ChartData1 = new ObservableCollection(); ChartData2 = new ObservableCollection(); ChartData3 = new ObservableCollection(); Random random = new Random(); for( int i = 0; i < 2000; i++ ) { var value = random.Next( 0, 100 ); var value1 = random.Next( 110, 200 ); var value2 = random.Next( 10, 20 ); var value3 = random.Next( 50, 100 ); ChartData.Add( new Model( i, value ) ); ChartData1.Add( new Model( i, value1 ) ); ChartData2.Add( new Model( i, value2 ) ); ChartData3.Add( new Model( i, value3 ) ); }; RootData.Add( new ChartViewModel() { Data = ChartData } ); RootData.Add( new ChartViewModel() { Data = ChartData1 } ); RootData.Add( new ChartViewModel() { Data = ChartData2 } ); RootData.Add( new ChartViewModel() { Data = ChartData3 } ); timer = new DispatcherTimer(); timer.Interval = new TimeSpan( 0, 0, 3 ); timer.Tick += new EventHandler( updatePlot ); timer.Start(); } private void updatePlot(object sender, EventArgs e) { ChartUpdateSuspended = true; Random random = new Random(); RootData.Clear(); for( int c = 0; c < 4; c++ ) { var cd = new ObservableCollection(); for( int i = 0; i < 2000; i++ ) { var value = random.Next( 0, 100 ); cd.Add( new Model( i + 40000, value ) ); }; RootData.Add( new ChartViewModel() { Data = cd } ); } ChartUpdateSuspended = false; } public event PropertyChangedEventHandler PropertyChanged; void RaisePropertyChanged(string name) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); }}public class ChartViewModel{ public ObservableCollection Data { get; set; }}public class Model : INotifyPropertyChanged{ private double xValue; public double XValue { get { return xValue; } set { if (value != xValue) { xValue = value; RaisePropertyChanged(nameof(XValue)); } } } private double yValue; public double YValue { get { return yValue; } set { if (value != this.yValue) { this.yValue = value; RaisePropertyChanged(nameof(YValue)); } } } private double yValue1; public double YValue1 { get { return yValue1; } set { if (value != this.yValue1) { this.yValue1 = value; RaisePropertyChanged(nameof(YValue1)); } } } private double yValue2; public double YValue2 { get { return yValue2; } set { if (value != this.yValue2) { this.yValue2 = value; RaisePropertyChanged(nameof(YValue2)); } } } public Model(double x, double y) { XValue = x; YValue = y; } public event PropertyChangedEventHandler PropertyChanged; void RaisePropertyChanged(string name) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); }}Now the situation is improved, but not perfect and inconsistent. I still see empty plot sometimes, sometimes not.Could you come up with any workaround for this?Regards,

Yuvaraj Palanisamy · Answer

Hi Masao Kawamura, 
 
Currently we are validating this, and we will update you with complete details on or before 7th September 2021. We appreciate your patience until then. 
 
Regards, 
Yuvaraj.

clintk · Answer

Hi Yuvaraj,Any update to this? It's 9th September.

Saravanan Madheswaran · Answer

Hi Masao Kawamura, 
 
Sorry for the continuous delay, we will update you the complete validation detail by Monday (13th September 2021).  
 
Regards, 
Saravanan.

Yuvaraj Palanisamy · Answer

Hi Masao Kawamura, 
 
Sorry for the delay. 
 
The reported problem “Empty points chart displayed sometimes” has been reproduced at our end. We are currently further validating this with high priority, and we will update you with complete details on or before 14th September 2021.  
 
Regards, 
Yuvaraj.

Yuvaraj Palanisamy · Answer

Hi Masao Kawamura, 
 
Thanks for your patience.On further analysis of this, when we clear the data collection, the series ItemsSource should be null and then add data to the collection chart should be revamped hence it seems like shows blank chart for a moment. 
 
To overcome this, we would like to suggest that the updating the data instead of clear and data in the collection. Please find the code example below. 
 
CodeSnippet: [ViewModel.cs] 




private void updatePlot(object sender, EventArgs e) 
{ 
    ChartUpdateSuspended = true; 
    Random random = new Random(); 
    RootData.Clear(); 
    for (int c = 0; c < 4; c++) 
    { 
        var cd = new ObservableCollection<Model>(); 
        for (int i = 0; i < 2000; i++) 
        { 
            var value = random.Next(0, 100); 
            cd.Add(new Model(i + 40000, value)); 
        }; 
        RootData[c] = new ChartViewModel() { Data = cd }; 
    } 
 
Also, we have attached the modified sample for your reference. Please find the sample from the below link. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/168508/ze/Sample-WPF1986532923  
  
Please let us know if you have any concern. 
 
Regards, 
Yuvaraj.

clintk · Answer

Hi Yuvaraj,As I stated before, the number of the charts dynamically changes in my actual app, so I just can't simply replace the member of the ObservableCollection by assigning new values to the specific slots.If I can't use RootData.Clear(), do I have to this?Add() if RootData.Count is less than or equal to the index of the data addingReplace (RootData[n] = new ChartData...) if the index of the data adding exists in RootDataRemoveAt() for all excess membersI'm just wondering an empty chart would appear when RemoveAt() is called.Regards,

Yuvaraj Palanisamy · Answer

Hi Masao Kawamura,  
 
We have checked your query and we would like to let know that the SfChart can update the datapoints properly for your use case scenario like RemoveAt(), Add() and replace. Also, we have attached the sample for your reference. Please find the sample from the below link. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/168508/ze/Sample-WPF_modified1868384340  
  
Please let us know if you have any concern. 
 
Regards, 
Yuvaraj.

clintk · Answer

Hi Yuvaraj,Your new sample code works, but I feel this is a bad workaround and changing a subject.If I do RemoveAt() or Add() instead of Clear(), and that can avoid displaying the empty chart, doesn't it mean ChartUpdateSuspend is not working at all?Actually, even If I comment out "ChartUpdateSuspend = false" in the new sample code, I still works and I don't see any empty chart.Updating the whole elements (including the number of elements) of RootData without Clear() is just frustrating.Is there any way to make ChartUpdateSuspend work properly?Regards,

Yuvaraj Palanisamy · Answer

Hi Masao Kawamura, 
 
We have checked the reported problem “Chart SuspendNotification and ResumeNotification method does not working” and we would like to let you know that the suspend and resume notification method is supported for only when adding, removing or replacing the collection of datapoints. It does not support when replace the ItemsSource property with new collection of datapoints. You can resolve this by using the following code example below.  
 
CodeSnippet: 





private void updatePlot(object sender, EventArgs e) 
{ 
    ChartUpdateSuspended = true; 
    Random random = new Random();             
 
    for (int c = 0; c < 3; c++) 
    {                 
        for (int i = 0; i < 2000; i++) 
        { 
            RootData[c].Data.RemoveAt(0); 
            var value = random.Next(0, 100); 
            RootData[c].Data.Add(new Model(i + 40000, value));  
        }; 
    } 
 
    ChartUpdateSuspended = false; 
}  
 
Also, we have attached the complete sample for your reference. Please find the sample from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/168508/ze/Sample_Updated748960596  
  
Please let us know if you have any concern. 
 
Regards, 
Yuvaraj.