Dynamic number of strip lines

[Xamarin Master]

I can dynamically add and remove series with Chart.ClearSeries, Chart.AddSeriesAsync, and Chart.RemoveSeries in the code section of the razor page.  However, I can't seem to dynamically add or remove strip lines to/from the chart.  If I add a @ref in the HTML section of the razor page, then I can get a reference to my ChartPrimaryXAxis in code.  If I then use that reference to xAxis.StripLines.Add(new ChartStripLine), nothing happens.

Is there a way to change strip lines programmatically, or dynamically using a for loop in the razor HTML based on some dynamic data generated by the code?

[Swetha Babu]

Hi Xamarin,

Greetings from Syncfusion.

We can add or remove the stripline dynamically in button click. 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/DynamicNumberOfStripLines-1771903340

Code Snippet:

<SfButton @onclick="AddStrip">Add Strip</SfButton>

<SfButton @onclick="RemoveStrip">Remove strip</SfButton>

 

<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">

            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

            <ChartStriplines>

                @foreach (stripData strip in stripCollection)

                {

                    <ChartStripline StartFromAxis="@strip.startFromAxis" Size="@strip.size" Color="@strip.color">

                    </ChartStripline>

                }

                @foreach (stripData strip in stripCollection)

                {

                    <ChartStripline Start="@strip.start" End="@strip.end" Color="@strip.color">

                    </ChartStripline>

                }

 

            </ChartStriplines>

        </ChartPrimaryXAxis>

 

public void AddStrip()

    {

        if (stripCollection.Count > Rangecollection.Count)

        {

            return;

        }

        if (stripCollection.Count > 0)

        {

            stripCollection.Add(new stripData

                {

                    start = Rangecollection[stripCollection.Count - 1].start,

                    end = Rangecollection[stripCollection.Count - 1].end,

                    color = Rangecollection[stripCollection.Count - 1].color,

                });

        }    }

Screenshot:

Initial Rendering:

After adding the Stripline:

In the above sample, when you click on the Add Strip button, then the stripline gets added and when you click on the Remove Strip button, then the stripline gets removed one by one.

Regards,

Swetha

[Xamarin Master]

I tried something like that and it didn't work.  In my use case, I have a button, that changes the data series AND changes the strip lines at the same time.

Something like:

private async Task RefreshData()

{

   Chart.ClearSeries();

   Remove all strip lines

   Read data from rest api

   Loop through data and call Chart.AddSeriesAsync()

   Loop through data and add strip lines

}

I will see if I can restore my sample and send it here.

[Xamarin Master]

I was playing with my sample and comparing it to your sample to see where the differences are.  I noticed an issue with your sample.  When the chart first draws, why are there no data series displayed??  The data series are hardcoded and should always be rendered, yet in your screenshot above, you can see no data series are displayed.  Once you start clicking buttons, then the chart series gets rendered and remains visible.  This seems like a bug to me.

[Xamarin Master]

I think I found the cause of the problem and it looks like a bug, but not sure where.  First, I had to change the runtime to .net6 since that is what I had installed so not sure if this is a .net6 bug or not.

Anyway, to reproduce the problem, I changed your button click handlers to be async.  For example:

    public void RemoveStrip()

    {

        if (stripCollection.Count > 0)

        {

            stripCollection.Remove(stripCollection[stripCollection.Count - 1]);

        }

    }

gets changed to:

    public async void RemoveStrip()

    {

        await Task.Run(() =>

        {

            if (stripCollection.Count > 0)

            {

                stripCollection.Remove(stripCollection[stripCollection.Count - 1]);

            }

        });

    }

Obviously, in my case, I am reading data froma REST API so I need async on my event handlers.  When I make this change, your sample starts to break.  You may have to click the add and remove buttons a few times, but eventually you will see that when clicking them, the chart STOPS updating and the next click will fix it.

[Xamarin Master]

I still don't know why the data series does not display on the first render, but it does seem that my async programming abilities is not correct. It seems that an async event handler should NOT return void. It should be async Task instead. I believe that solves the problem

[Durga Gopalakrishnan]

Hi Xamarin,

We have ensured your reported scenario by including async, await for adding and removing methods of striplines, but we are unable to reproduce the reported console exception while clicking the button. We have attached the modified sample for your reference. 

We are checking on the chart series not displayed at initial rendering problem, and we will update the further details within two business days(20^th July 2022). We appreciate your patience until then.

Regards,

Durga Gopalakrishnan.

Attachment: StripLines_4bea8663.zip

[Xamarin Master]

Using your sample (retargeted to .net6), I can reproduce the problem.  You made the same mistake I did and used async void instead of async Task.  You have to click the buttons very fast sometimes in random order and then when you slow down to verify correct operation, you will see some renders are skipped.

If you really want to recreate the problem, then you have to simulate a task taking a long time.  This is very simple.  Just add

await Task.Delay(TimeSpan.FromSeconds(1));

at the beginning of both of your button handlers.  This causes it to break every time you click the buttons.  According to my research, Blazor needs a Task to wait for before it re-renders the page.  By NOT returning a Task in the event handlers, the Blazor has nothing to wait on and renders the page before the strip lines have changed.

If you then modify your button handlers to return a Task instead of void, the problem is solved.  Clicking the button will wait for 1 second and then the strip lines are properly rendered.

[Durga Gopalakrishnan]

Hi Xamarin,

We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 2^nd August 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/36431/console-error-while-adding-and-removing-striplines

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.

[Swetha Babu]

Hi Xamarin,

Thank you for your patience.

We have included the fix for the reported issue in our Essential Studio Volume 2 SP release which is rolled out and is available for download under the following link.

Essential Studio 2022 Volume 2 Service Pack Release v20.2.0.43 is available for download | Announcements Forums | Syncfusion

We thank you for your support and appreciate your patience in waiting for the release. Please et back to us if you need further assistance.

Regards,

Swetha