Chart Live Data - replacing existing series

Question

I am using the latest 20.1.47 version.

List<ChartSeries> series (
candle and line series ) are being generated in background on a regular basis. I am using the following code to replace existing chart series:await InvokeAsync( async () => {    chart.ClearSeries();    chart.RefreshLiveData();    StateHasChanged();    await chart.AddSeriesAsync(series);    chart.RefreshLiveData();    StateHasChanged();});Flickering annoyance is not that much of concern, but I am getting the following random error (sometimes need to wait a few hours): System.NullReferenceException: Object reference not set to an instance of an object.   at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.GetAxisLength()   at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.HandleChartSizeChange(Rect rect)   at Syncfusion.Blazor.Charts.Internal.ChartSeriesRendererContainer.HandleChartSizeChange(Rect rect)   at Syncfusion.Blazor.Charts.SfChart.UpdateRenderers()   at Syncfusion.Blazor.Charts.SfChart.OnLayoutChange()   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()   at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)

Swetha Babu · Answer

Hi Andrey,Greetings from Syncfusion.We can add a new Series by using the AddSeries() and
remove the series by using the ClearSeries method in Chart component. However,
we have created a simple blazor application to demonstrate the same and it can
be downloaded from the below link.Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AddRemoveSeries-1252531847Code Snippet:

public void add()
      {
          chart.AddSeries(new
  List<ChartSeries>
         
  {
            
  new ChartSeries { Type = ChartSeriesType.Bar, XName=
  nameof(LineChartData.XValue), YName= nameof(LineChartData.YValue),
  DataSource= GetChartData() }
         
  });
      }

If the reported scenario still persists, please modify the
above sample to reproduce the reported scenario. It will be helpful for us to
analyze further and assist you better.Regards,Swetha

Mr Andrey Voronov · Answer

In my environment I also recalculate X and Y axis min and max values. Here is updated version of the sample provided. Notice that chart is loaded properly initially, but Y axis range get reset to auto when you click on "Add Series" button :@page "/"@using Syncfusion.Blazor.Charts

@foreach (SeriesData series in SeriesCollection) { }@**@

@code {SfChart chart;List SeriesCollection;protected double AxisYMin { get; set; } = -1;protected double AxisYMax { get; set; } = 100;public async Task add(){Random random = new Random();AxisYMin = -1 - random.Next(0, 10);AxisYMax = 100 + random.Next(0, 10);var series = new List();for (int i = 0; i < random.Next(2, 5); i++){series.Add(new ChartSeries { Type = ChartSeriesType.Bar, XName = nameof(LineChartData.XValue), YName = nameof(LineChartData.YValue), DataSource = GetChartData() });}chart.ClearSeries();await chart.AddSeriesAsync(series);}// Here, the chart series has been removed by removing the series data in the "SeriesCollection" list.public void clear(){chart.ClearSeries();}protected override void OnInitialized(){base.OnInitialized();SeriesCollection = new List() {new SeriesData {XName = nameof(LineChartData.XValue),YName = nameof(LineChartData.YValue),Data = GetChartData()}};}private List GetChartData(){int count = 20;double value = 0;List data = new List();Random random = new Random();for (int i = 0; i < count; i++){if (i % 3 == 0){value = value - (random.Next(0, 100) / 3) * 4;}else if (i % 2 == 0){value = value + (random.Next(0, 100) / 3) * 4;}data.Add(new LineChartData(){XValue = i,YValue = value});}return data;}public class SeriesData{public string XName { get; set; }public string YName { get; set; }public List Data { get; set; }}public class LineChartData{public double XValue { get; set; }public double YValue { get; set; }}protected void Loaded(LoadedEventArgs e){/*t = new System.Timers.Timer(1000);t.AutoReset = false;t.Elapsed += CallBack;t.Enabled = true;t.Start();*/}private System.Timers.Timer t;private void CallBack(object source, System.Timers.ElapsedEventArgs e){t.Stop();this.InvokeAsync(async () =>{await add();// this.StateHasChanged();t.Start();});}}

Swetha Babu · Answer

Hi Andrey,Thank you for your update.We have checked the sample and found the y axis min and max
got applied properly, since we have added bar chart as new series the y axis
will render as horizontal axis, hence it got confused. Now we changed line to
column series, where you can see the min and max got applied for vertical axis.
 However, we have created a simple blazor application to demonstrate the
same and it can be downloaded from the below link.Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSample-1011050316Screenshot:Kindly, revert us if you have any concerns.Regards,Swetha

Mr Andrey Voronov · Answer

I managed to reproduce System.NullReferenceException: Object reference not set to an instance of an object. at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.GetAxisLength() at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.SeriesRenderer() at Syncfusion.Blazor.Charts.Internal.ChartSeriesRenderer.HandleChartSizeChange(Rect rect) at Syncfusion.Blazor.Charts.Internal.ChartSeriesRendererContainer.HandleChartSizeChange(Rect rect) at Syncfusion.Blazor.Charts.SfChart.UpdateRenderers() at Syncfusion.Blazor.Charts.SfChart.OnLayoutChange() at Syncfusion.Blazor.Charts.ChartAxis.OnParametersSet() at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync() Here is updated sample:@page "/"@using Syncfusion.Blazor.Charts

@**@

@code {SfChart chart;protected double AxisYMin { get; set; } = -1;protected double AxisYMax { get; set; } = 100;public class SeriesData{public string XName { get; set; }public string YName { get; set; }public List Data { get; set; }}public class LineChartData{public double XValue { get; set; }public double YValue { get; set; }}public async Task add(){Random random = new Random();AxisYMin = -random.Next(0, 500);AxisYMax = 300 + random.Next(0, 100);var data = new SeriesData {XName = nameof(LineChartData.XValue),YName = nameof(LineChartData.YValue),Data = GetChartData()};var series = new ChartSeries() { XName = data.XName, YName = data.YName, DataSource = data.Data };chart.ClearSeries();await chart.AddSeriesAsync(new List { series });}// Here, the chart series has been removed by removing the series data in the "SeriesCollection" list.public void clear(){chart.ClearSeries();}private List GetChartData(){int count = 10;double value = 0;List data = new List();Random random = new Random();for (int i = 0; i < count; i++){if (i % 3 == 0){value = value - (random.Next(0, 100) / 3) * 4;}else if (i % 2 == 0){value = value + (random.Next(0, 100) / 3) * 4;}data.Add(new LineChartData(){XValue = i,YValue = value});}return data;}}

Swetha Babu · Answer

Hi Andrey,Thank you for your update.We have considered this as a bug and logged a defect report
for the same. The fix for the reported scenario will be available in our
upcoming weekly patch release which is expected to be rolled out on 26th
April, 2022. Please find the below feedback link to keep track of the reported
scenario.Feedback link: https://www.syncfusion.com/feedback/34160If 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

Swetha Babu · Answer

Hi Andrey,Thank you for your patience.The AddSeries and ClearSeries public method will not work
when updating the Minimum and Maximum value of the Axis dynamically. Instead,
we can add and remove a series by adding or removing series data to ChartSeriesCollection.
However, we have created a simple blazor application to demonstrate the same
and it can be downloaded from the below link.

public void AddChartSeries()
  {
      SeriesCollection.Add(new SeriesData
      {
          XName =
  nameof(LineChartData.XValue),
          YName =
  nameof(LineChartData.YValue),
          Data =
  GetChartData()
      });
  }

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAddRemoveSeries-639001385Please find the below documentation link for the same.UG link: https://blazor.syncfusion.com/documentation/chart/how-to/add-removeKindly, revert us if you have any concerns.Regards,Swetha

Mr Andrey Voronov · Answer

I am using SfChart ClearSeries() and SfChartAddSeriesAsync() methods to create series dynamically.This issue still has not been fixed in the latest 20.1.51 version. Here is updated version of the sample provided which does the same (without ChartSeriesCollection ) but does not work:@page "/"@using Syncfusion.Blazor.Charts

@*@foreach (SeriesData series in SeriesCollection){}*@

@code {SfChart chart;List SeriesCollection;protected double AxisYMin { get; set; } = -1;protected double AxisYMax { get; set; } = 100;public class SeriesData{public string XName { get; set; }public string YName { get; set; }public List Data { get; set; }}public class LineChartData{public double XValue { get; set; }public double YValue { get; set; }}public async Task add(){chart.ClearSeries();var series = new List();series.Add(new ChartSeries { Type = ChartSeriesType.Line, XName = nameof(LineChartData.XValue), YName = nameof(LineChartData.YValue), DataSource = GetChartData() });await chart.AddSeriesAsync(series);Random random = new Random();AxisYMin = -random.Next(0, 500);AxisYMax = 300 + random.Next(0, 100);/*SeriesCollection.Add(new SeriesData{XName = nameof(LineChartData.XValue),YName = nameof(LineChartData.YValue),Data = GetChartData()});clearSeries();*/}public void clearSeries(){if (SeriesCollection.Count > 1){SeriesCollection.Remove(SeriesCollection[SeriesCollection.Count - 1]);}}// Here, the chart series has been removed by removing the series data in the "SeriesCollection" list.public void clear(){if (SeriesCollection.Count > 0){SeriesCollection.Remove(SeriesCollection[SeriesCollection.Count - 1]);}}protected override void OnInitialized(){base.OnInitialized();SeriesCollection = new List() { };}private List GetChartData(){int count = 10;double value = 0;List data = new List();Random random = new Random();for (int i = 0; i < count; i++){if (i % 3 == 0){value = value - (random.Next(0, 100) / 3) * 4;}else if (i % 2 == 0){value = value + (random.Next(0, 100) / 3) * 4;}data.Add(new LineChartData(){XValue = i,YValue = value});}return data;}}

Swetha Babu · Answer

Hi Andrey,Thank you for your update.Currently, we are not using the AddSeries() and ClearSeries()
method in Chart component. Till v19.3, we have used these public methods. But
now, we add and remove series dynamically by using the add and remove method.
In our upcoming releases, we may deprecate these public methods in Chart
Component. So, please follow the below documentation link to add and remove
series dynamically.Document link: https://blazor.syncfusion.com/documentation/chart/how-to/add-removeSample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAddRemoveSeries-639001385Kindly, revert us if you have any concerns.Regards,Swetha