AddSeries doesn't add series

[Richard]

Hi,

I'm trying to programmatically add a series to a chart.

the collection is an Observable collection because i want to add more values in real-time, however I can't get it to work with static test data only.

According to this page:

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-3.1#stateful-reconnection-after-prerendering

the chart object is only available from OnAfterRender(), so that's where I'm attempting to add the test series.

I will be adding more chart series later on (in event handlers raised from elsewhere) however they will always happen after this point in time.

Here's the razor page code:

@page "/arbitrage/lastprice"
 
<h2>Last Price Arbitrageh2>
<br />
<div id="ControlRegion">
    <SfChart @ref="LastPriceArbitrageChart">      
        <ChartPrimaryXAxis Title="Time"
                           ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"
                           IntervalType="IntervalType.Hours"
                           Minimum="DateTime.UtcNow.AddDays(-1)"
                           Maximum="DateTime.UtcNow.AddDays(1)"
                           RangePadding="ChartRangePadding.None">
        ChartPrimaryXAxis>
 
        <ChartPrimaryYAxis Title="Arbitrage %"
                           Minimum="0.5"
                           Maximum="2.0">
        ChartPrimaryYAxis>
 
        <ChartSeriesCollection>
        ChartSeriesCollection>
 
        <ChartTooltipSettings Enable="false">ChartTooltipSettings>
        <ChartCrosshairSettings Enable="false">ChartCrosshairSettings>
        <ChartZoomSettings EnableSelectionZooming="false">ChartZoomSettings>
    SfChart>
div>
 
<style>
    .ulstyle {
        margin: 0px;
        padding-left: 20px;
        display: inline-block;
    }
 
    .list {
        float: left;
        line-height: 20px;
        margin: 10px;
        min-width: 200px;
    }
style>
 
@code{
 
    public ObservableCollection<Tuple<DateTime, decimal>> TestSeries =
    new ObservableCollection<Tuple<DateTime, decimal>>();
 
    public SfChart LastPriceArbitrageChart { get; set; }
 
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(-5), (decimal)1.0));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(-4), (decimal)1.2));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(-3), (decimal)1.5));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(-2), (decimal)1.2));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(-1), (decimal)0.6));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(0), (decimal)0.9));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(1), (decimal)1.0));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(2), (decimal)1.7));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(3), (decimal)1.5));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(4), (decimal)1.2));
            TestSeries.Add(new Tuple<DateTime, decimal>(DateTime.UtcNow.AddHours(5), (decimal)1.3));
 
            // create a fake datapoint so we can programmatically set the correct XName and YName from the Tuple
            var fakeDatapoint = new Tuple<DateTime, decimal>(DateTime.UtcNow, (decimal)1.0);
 
            // create a new chart series and connect it to the new observable collection
            ChartSeries testSeries = new ChartSeries()
            {
                Name = nameof(TestSeries),
                Type = ChartSeriesType.Line,
                DataSource = TestSeries,
                XName = nameof(fakeDatapoint.Item1),
                YName = nameof(fakeDatapoint.Item2),
                Animation = new ChartSeriesAnimation { Enable = false }
            };
 
            LastPriceArbitrageChart.AddSeries(testSeries);
        }
    }
}

Here's the result:

Am I doing something wrong, or is this a bug?

Best regards,

Richard

[Srihari Muthukaruppan]

Hi Richard,  

  

We have analyzed your query. We were able to reproduce the issue in your version and we confirm this as a bug and logged a defect report. You can keep track of the bug from the feedback portal below.  

  

Feedback Link: https://www.syncfusion.com/feedback/15726

  

The fix will be available in our weekly patch release which is scheduled to be rolled out on or before July 24, 2020. 

  

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.  

  

Thanks,  

Srihari. 

[Srihari Muthukaruppan]

Hi Richard,

Sorry for the inconvenience.

Our patch release is scheduled to be rolled out on July 28, 2020. We appreciate your patience until then.

Regards,
Srihari

[Srihari Muthukaruppan]

Hi Richard,

While validating the reported scenario. From that, we suggest you to use the below method to overcome the reported scenario. Based on your requirement we have prepared a sample for your reference. Please find the sample, code snippet, and screenshot. 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AddSeries18.2.471891910198.zip 

  

Code Snippet: 

 @using Syncfusion.Blazor.Charts 

@using System.Collections.ObjectModel;

<SfChart @ref="LastPriceArbitrageChart">

   // add your additional code here

    <ChartSeriesCollection></ChartSeriesCollection>  

  // add your additional code here

</SfChart>

@code{

    public ObservableCollection<Tuple<DateTime, decimal>> TestSeries = new ObservableCollection<Tuple<DateTime, decimal>>();

            public SfChart LastPriceArbitrageChart { get; set; }

            List<string> EventType = new List<string>();

            protected override async Task OnAfterRenderAsync(bool firstRender)

            {

                await Task.Delay(1000);

                if (firstRender)

                {

                  // add your additional code here

                    ObservableCollection<ChartSeries> testSeries = new ObservableCollection<ChartSeries>();

                    testSeries.Add(new ChartSeries

                    {

                        Name = nameof(TestSeries),

                        Type = ChartSeriesType.Line,

                        DataSource = TestSeries,

                        XName = nameof(fakeDatapoint.Item1),

                        YName = nameof(fakeDatapoint.Item2),

                        Animation = new ChartSeriesAnimation { Enable = false }

                    });

                    this.LastPriceArbitrageChart.AddSeries(testSeries);

                }

            }

    }

 

  

Screenshot: 

 

  

Let us know if you have any concerns. 

  

Regards,  

Srihari M