1. Home
  2. Forum
  3. Blazor
  4. Problems with Live Chart

Problems with Live Chart

I use the Live Chart component to create a  3-line live chart sending data from sensors and I encountered a number of issues. It worked when using only one line but when added more it started breaking giving the following error:


blazor.server.js:1 [2022-03-02T15:32:16.267Z] Error: System.InvalidOperationException: Collection was modified; enumeration operation may not execute.

   at Syncfusion.Blazor.Charts.Internal.ChartMarkerRenderer.RenderMarkers(RenderTreeBuilder builder)

   at Syncfusion.Blazor.Charts.Internal.ChartMarkerRenderer.BuildRenderTree(RenderTreeBuilder builder)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

log @ blazor.server.js:1

Then when I removed the markers it started working for a short time and then again threw an error with the following message:


blazor.server.js:1 [2022-03-02T15:33:43.950Z] Error: System.InvalidOperationException: Collection was modified; enumeration operation may not execute.

   at System.Collections.Generic.Dictionary`2.Enumerator.MoveNext()

   at Syncfusion.Blazor.Charts.Internal.ChartAxisRenderer.RenderCartesianAxisInsideCollection(RenderTreeBuilder builder)

   at Syncfusion.Blazor.Charts.Internal.ChartAxisRenderer.BuildRenderTree(RenderTreeBuilder builder)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

log @ blazor.server.js:1


When I set min and max values for the axes and not used the default responsive mode it didn't crash but the chart wouldn't render correctly . So then I made the axis not visible when I first render the chart and visible when pressing a button so now it works but occasionally it throws the following error:


blazor.server.js:1 [2022-03-02T16:00:38.903Z] Error: System.InvalidOperationException: Unable to set property 'DataSource' on object of type 'Syncfusion.Blazor.Charts.ChartSeries'. The error was: Collection was modified; enumeration operation may not execute.

 ---> System.InvalidOperationException: Collection was modified; enumeration operation may not execute.

   at System.Collections.Generic.List`1.Enumerator.MoveNextRare()

   at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter`2.OnWriteResume(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)

   at System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryWrite(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)

   at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)

   at System.Text.Json.Serialization.JsonConverter`1.WriteCore(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)

   at System.Text.Json.JsonSerializer.WriteUsingSerializer[TValue](Utf8JsonWriter writer, TValue& value, JsonTypeInfo jsonTypeInfo)

   at System.Text.Json.JsonSerializer.WriteStringUsingSerializer[TValue](TValue& value, JsonTypeInfo jsonTypeInfo)

   at System.Text.Json.JsonSerializer.Serialize[TValue](TValue value, JsonSerializerOptions options)

   at Syncfusion.Blazor.Internal.SfBaseUtils.Equals[T](T oldValue, T newValue)

   at Syncfusion.Blazor.Charts.ChartSeries.set_DataSource(IEnumerable`1 value)

   at Microsoft.AspNetCore.Components.Reflection.PropertySetter.CallPropertySetter[TTarget,TValue](Action`2 setter, Object target, Object value)

   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value)

   --- End of inner exception stack trace ---

   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|3_0(Object target, PropertySetter writer, String parameterName, Object value)

   at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)

   at Syncfusion.Blazor.SfDataBoundComponent.SetParametersAsync(ParameterView parameters)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)


Since these errors are for the internal collections of the chart there is nothing more I can do than the work-arounds I mentioned.


14 Replies
DG Durga Gopalakrishnan Syncfusion Team March 6, 2022 10:04 PM UTC

Hi Kostas,


Greetings from Syncfusion.


We are validating your reported scenario with specified console exception. We will update further details within two business days(8th March 2022). We appreciate your patience until then.


Regards,

Durga G.


DG Durga Gopalakrishnan Syncfusion Team March 8, 2022 09:32 PM UTC

Hi Kostas,


Thanks for being patience. We have ensured your reported scenario; unfortunately we are unable to replicate the reported exception. We request you to share the replication steps or video reference to reproduce reported problem. We have attached tested sample and video for your reference.


Sample :https://www.syncfusion.com/downloads/support/directtrac/general/ze/LiveUpdate-388956436.zip


Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/LiveData990804480.zip


If you are still facing problem, please try to replicate an issue above sample or share issue reproduced sample to validate this case further. Kindly revert us if you have any other concerns.


Regards,

Durga G.


UN Unknown March 9, 2022 03:21 PM UTC

Hello, thank you for your reply. I tried the code you posted feeding it with my data but still having the same issues.
My AddData method:


private void AddData(object sender, ElapsedEventArgs e)

        {

            if (liveChart == null)

            {

                return;

            }

            if (SensorReading != null)

            {

                dotCount++;

                if (dotCount % 50 == 0)

                {

                    dotNum++;

                    dataLength++;

                    DataPoints.Add(new ChartDataPoint

                    {

                        Time = DateTime.Now.AddSeconds(dataLength + 10),

                        X = SensorReading.RawAccelX,

                        Y = SensorReading.RawAccelY,

                        Z = SensorReading.RawAccelZ

                    });

                }

                if (dotCount % (2 * dotModulo) == 0)

                {

                    if (dotNum > 30)

                    {

                        int overflow = dotNum - 30;

                        for (int i = 0; i < dotNum - 30; i++)

                        {

                            DataPoints.RemoveAt(i);

                            dotNum--;

                        }

                    }

                    else

                    {

                        DataPoints.RemoveAt(0);

                        dotNum--;

                    }

                }

            }

        }


I insert my sensor data in the ChartDataPoint properties, I add a dot for every 50 data points I get from my data and I don't let the chart overflowed by not letting more than 30 points exist in the chart at the same time(removing this part or the part about adding 1 out of 50 points thus making the code the exact same as yours doesn't make any difference). 


DG Durga Gopalakrishnan Syncfusion Team March 13, 2022 08:34 PM UTC

Hi Kostas,


We are checking with provided snippet. We will update further details within two business days(15th March 2022). We appreciate your patience until then.


Regards,

Durga G.


BP Baby Palanidurai Syncfusion Team March 21, 2022 08:30 AM UTC

Hi Kostas,


We have tried to replace AddData method. Since, we are not aware of dotNum, dotModulo, dotCount values, we used some random values for each, unfortunately we are unable to reproduce the reported issue. Kindly please the details about the values which will be helpful to furthermore and provide the solution sooner.



Regards,

Baby.


AN Andreas April 30, 2022 04:58 PM UTC

I'm facing the same issue in version 20.1.0.51


I have a Service, adding data every 5 seconds to a ObserveableCollection and removing the oldest data if more then 1800 entries are in the list.

public ObservableCollection Last30MinutesData = new();
public class PowerChartDataLive
{
    public DateTime Time { get; set; }
    public double PowerProduction { get; set; }
    public double PowerGridFrom { get; set; }
    public double PowerGridTo { get; set; }
    public double PowerConsumption { get; set; }
}


The Chart is configured like this:



                
                
                    
                
                


                
                                                     YName="@nameof(PowerChartDataLive.PowerProduction)"
                                 Name="@nameof(PowerChartDataLive.PowerProduction)"
                                 Type="ChartSeriesType.Spline">
                        
                    
                                                     YName="@nameof(PowerChartDataLive.PowerConsumption)"
                                 Name="@nameof(PowerChartDataLive.PowerConsumption)"
                                 Type="ChartSeriesType.Spline">
                        
                    


                                                     YName="@nameof(PowerChartDataLive.PowerGridTo)"
                                 Name="@nameof(PowerChartDataLive.PowerGridTo)"
                                 Type="ChartSeriesType.Line">
                        
                    
                                                     YName="@nameof(PowerChartDataLive.PowerGridFrom)"
                                 Name="@nameof(PowerChartDataLive.PowerGridFrom)"
                                 Type="ChartSeriesType.Line">




I can work around the issue, if I don't add the data in the Service but in the Razor Component it self using (base.InvokeAsync) sampleCode:

if (DateTime.Now.Second % 5 == 0)
{
    await base.InvokeAsync(()=> { AddLiveChartData(newData); });
}


publicvoidAddLiveChartData(PowerDataLive newData)

{
Last30MinutesData.Add(new()
{
Time=DateTime.Now,
PowerProduction= newData.PowerProduction,
PowerConsumption= newData.PowerConsumption,
PowerGridTo= newData.PowerGridTo,
PowerGridFrom= newData.PowerGridFrom
});
if(Last30MinutesData.Count>(30*60))
{
Last30MinutesData.RemoveAt(0);
}
}




Only being able to Update the ObserveableCollection in the Component prevents me from gathering data even when the component is not "active" - so a real 30 minutes (live chart) is not possible - only if the user remains 30 minutes + on the components, that defeats the purpose, sadly


DG Durga Gopalakrishnan Syncfusion Team May 2, 2022 02:20 PM UTC

Hi Andreas,


We have prepared sample based on your requirement. In an attached sample, we have removed first data after each 15 seconds based on data count, chart is updated properly without any exception. Please check with below snippet and sample.


private void AddData(Object source, ElapsedEventArgs e)

    {

        if (liveChart == null)

            return;

        dataLength++;

        Count = Count + 5000;

        if (DataPoints.Count > (12*Count)/2)

        {

            DataPoints.RemoveAt(0);

        }

        //….

}


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/LiveData-552847640.zip


Please share us whether you are facing any console exception or live update is not performed after 30 minutes? If so, please share us issue reproduced sample to validate this case from our end.


Regards,

Durga Gopalakrishnan.


AN Andreas May 5, 2022 05:48 PM UTC

I have the same console error as the creator of this topic. 


the error is not after the 30 minutes but within the  first few seconds

Attached the modified version.

Console Error:

[Error] [2022-05-05T17:46:48.847Z] Error: System.InvalidOperationException: Collection was modified; enumeration operation may not execute.
   at Syncfusion.Blazor.Charts.Internal.ChartAxisRenderer.RenderCartesianAxisInsideCollection(RenderTreeBuilder builder)
   at Syncfusion.Blazor.Charts.Internal.ChartAxisRenderer.BuildRenderTree(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
log (blazor.server.js:1:115658)
Qn (blazor.server.js:1:131393)
(anonymous function) (blazor.server.js:1:129309)
forEach
_invokeClientMethod (blazor.server.js:1:71888)
_processIncomingData (blazor.server.js:1:69942)
(anonymous function) (blazor.server.js:1:48648)
[Error] Unhandled Promise Rejection: Error: Cannot send data if the connection is not in the 'Connected' State. (x3)
[Error] Unhandled Promise Rejection: Error: Cannot send data if the connection is not in the 'Connected' State.
(anonymous function)
rejectPromise
rejectPromiseWithFirstResolvingFunctionCallCheck
reject
send (blazor.server.js:1:68699)
beginInvokeDotNetFromJS (blazor.server.js:1:131180)
w (blazor.server.js:1:2188)
(anonymous function) (syncfusion-blazor.min.js:17:32536)
[Error] Unhandled Promise Rejection: Error: Cannot send data if the connection is not in the 'Connected' State.
(anonymous function)
rejectPromise
rejectPromiseWithFirstResolvingFunctionCallCheck
reject
send (blazor.server.js:1:68699)
beginInvokeDotNetFromJS (blazor.server.js:1:131180)
w (blazor.server.js:1:2188)
(anonymous function) (syncfusion-blazor.min.js:17:10353)
(anonymous function)

Attachment: LiveData552847640_ef3fe3d9.zip

DG Durga Gopalakrishnan Syncfusion Team May 6, 2022 03:29 PM UTC

Hi Miquel,


We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 17th May 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link.


Feedback Link :  https://www.syncfusion.com/feedback/34726/console-error-while-updating-live-chart


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.


Regards,

Durga Gopalakrishnan.


DG Durga Gopalakrishnan Syncfusion Team May 17, 2022 02:00 PM UTC

Hi Miquel,


We are glad to announce that our v20.1.0.56 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.Charts NuGet package.


NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.Charts/


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Regards,

Durga Gopalakrishnan.


AN Andreas May 23, 2022 06:18 AM UTC

hi,


I  have updated to the  latest version of Syncfusion.Charts  and also added some more data to  the chart (like it is in my real  app)  and I'm  still  facing the same issue.


the updated example is  attached


Attachment: LiveData552847640_71a0e8bb.zip

SB Swetha Babu Syncfusion Team May 24, 2022 10:37 AM UTC

Hi Andreas,


When we analyzed the reported scenario, we came to know that the console error is thrown in the Legend. However, we have considered this as a bug and logged a defect report for the same. The fix for the reported scenario will be included in our weekly patch release which is expected to be rolled out on 31st May, 2022. Please find the below feedback link for your reference.


Feedback link: https://www.syncfusion.com/feedback/35136/console-error-thrown-in-legend


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.


Regards,

Swetha


SB Swetha Babu Syncfusion Team June 1, 2022 10:19 AM UTC

Hi Andreas,


Sorry for the inconvenience caused.


We have not included the fix for the reported issue in our weekly patch release. However, we have created the fix as a custom patch as it is in testing phase and it can be downloaded from the below link.


https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.Blazor.20.1.0.59858919367


Please replace the above packages in your application to resolve the reported issue. We will include the fix for the reported issue in our next weekly patch release. Please use the above nugget until the fix is included in our weekly patch release.


Regards,

Swetha Babu


DG Durga Gopalakrishnan Syncfusion Team June 8, 2022 12:00 PM UTC

Hi Andreas,


We are glad to announce that our v20.1.0.59 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.Charts NuGet package.


NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.Charts/


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Regards,

Durga Gopalakrishnan.


Loader.
Up arrow icon