Completed
Last Updated: 11 Sep 2020 04:26 by ADMIN
Release 2.17.0
Cheryl
Created on: 11 Nov 2019 18:56
Category: Charts
Type: Bug Report
15
Cannot clear dynamically created series

Hi!

I'm building a Blazor Component using your TelerikChart.  To build my chart, I'm dynamically inserting the series name and the series data, which is pulled from a list.  I also have a button on the page that changes the dataset (last month, this month, next month, etc).  The button will rebuild the list of names and data, and Blazor will build the chart with a 'foreach' entry in the ChartSeriesItems section of the Chart Component.

The problem is that the Items are not cleared each time.  When I click the button, I'm getting previous values. In the example below, I have 3 data sets.  The first has 4 items, the second has 8 and the third has 6.  If the user clicks the second, showing all 8, then clicks the first, the chart will show the new 4, and the previous 5-8 from the second set.  

 My chart description in HTML is:

... 

<ChartSeriesItems> @foreach(Tuple<string, object[]> t in myData) { <ChartSeries Type="ChartSeriesType.Column" Name=@t.Item1 Data=@t.Item2 /> } </ChartSeriesItems>

... 

I have checked my data through debugging to ensure that the myData variable is correct (i.e. when I click the first data, it only has 4 items).  However, when the chart displays, it shows 8 items. 

Is there a CLEARDATA method or something I can call on the Chart to ensure that the data is reset each time?  I see that there is a Clear() in JavaScript, but I'm writing in only Blazor and C#, with no JavaScript.

I've attached the .razor page for your reference.  (As this is my test code, I'm using random number generation to get the data.)

 

Thank you so much for your help!!

-Cheryl Simpson 

Attached Files:
5 comments
ADMIN
Marin Bratanov
Posted on: 10 Sep 2020 16:43

Hi Brad,

Check out the opening post of this thread - the concept is to create a loop over descriptors for the chart series and change the markup that way. Of course, conditional markup is also an option (I made an example for you of this, you can find it attached at the bottom of this post).

This is the general concept for Blazor and this is what will start working in the chart when a release with this fix becomes available. The page will be updated with the release number when we know if it will make it in the next 2.17.0 or a later release. Of course, this will not work with the current latest (2.16.0).

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Attached Files:
Brad
Posted on: 10 Sep 2020 15:38
I see this is marked as completed.  How can we clear the chart now?
ADMIN
Marin Bratanov
Posted on: 02 Mar 2020 17:29

Hi all,

Here's a workaround that seems to work for me (see the second row of buttons):

 

shows problems:<br />
<TelerikButton @onclick=@(e=>setData(1))>First Data Set</TelerikButton>
<TelerikButton @onclick=@(e=>setData(2))>Second Data Set</TelerikButton>
<TelerikButton @onclick=@(e=>setData(3))>Third Data Set</TelerikButton>

<br />
should work:<br />
<TelerikButton OnClick="@ClearSeries">Clear series</TelerikButton>
<TelerikButton OnClick="@ClearSeries2">Clear series and Generete first set of data (4 series)</TelerikButton>


@if (ChartVisible)
{
    <TelerikChart>
        <ChartSeriesItems>
            @foreach (Tuple<string, object[]> t in myData)
            {
                <ChartSeries Type="ChartSeriesType.Column" Name=@t.Item1 Data=@t.Item2 />
            }
        </ChartSeriesItems>
        <ChartCategoryAxes>
            <ChartCategoryAxis Categories=@xAxisItems />
        </ChartCategoryAxes>
        <ChartTitle Text="Yearly Data" />
        <ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom" />
    </TelerikChart>
}

@code {
    bool ChartVisible { get; set; } = true;
    async Task ClearSeries()
    {
        myData.Clear();
        ChartVisible = false;
        await Task.Delay(30);
        ChartVisible = true;
        StateHasChanged();
    }

    async Task ClearSeries2()
    {
        await ClearSeries();
        setData(1);
    }

    List<Tuple<string, object[]>> myData = new List<Tuple<string, object[]>>();
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };

    protected override async Task OnInitializedAsync()
    {
        setData(3);
    }

    void setData(int offset)
    {
        myData.Clear();
        switch (offset)
        {
            case 1:
                {
                    myData = buildList(4);
                    break;
                }
            case 2:
                {
                    myData = buildList(8);
                    break;
                }
            case 3:
                {
                    myData = buildList(6);
                    break;
                }
        }

        List<Tuple<string, object[]>> buildList(int itemCount)
        {
            List<Tuple<string, object[]>> tempList = new List<Tuple<string, object[]>>();
            Tuple<string, object[]> tempTuple;
            Random rand = new Random();
            object[] tempData;

            for (int i = 0; i < itemCount; i++)
            {
                tempData = new object[4];
                for (int j = 0; j < 4; j++)
                {
                    tempData[j] = rand.Next(100);
                }
                tempTuple = new Tuple<string, object[]>("Item " + i, tempData);
                tempList.Add(tempTuple);
            }
            return tempList;

        }

    }
}

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Gilles
Posted on: 19 Nov 2019 08:53

To create dynamically a serie, I have personnaly use a Fragment, something like this :

 

            <TelerikChart>
                <ChartSeriesItems ChildContent="ChartSeriesItemsFragment"></ChartSeriesItems>

                <ChartValueAxes>
                    <ChartValueAxis Name="ValueAxis1">
                        <ChartValueAxisTitle Text="Axis 1"></ChartValueAxisTitle>
                    </ChartValueAxis>
                </ChartValueAxes>
            </TelerikChart>

@code {

            private RenderFragment ChartSeriesItemsFragment;

            this.ChartSeriesItemsFragment = builder =>
            {
                builder.OpenComponent(i++, typeof(ChartSeries));
                builder.AddAttribute(i++, "Data", data);   // <---- The data you want to show
                builder.AddAttribute(i++, "Field", nameof(ChartSerieViewModel.Value));
                builder.AddAttribute(i++, "Type", ChartSeriesType.Line);
                builder.AddAttribute(i++, "Name", "Serie 1");
                builder.AddAttribute(i++, "CategoryField", nameof(ChartSerieViewModel.Date));
                builder.AddAttribute(i++, "Axis", "ValueAxis1");   <-- The axis
                builder.CloseComponent();
            };

}

 

 

Not really happy to have to use this syntax but it works.

Hope it helps

ADMIN
Marin Bratanov
Posted on: 12 Nov 2019 12:09

Hi Cheryl,

Thank you for the detailed description and the sample. Both really helped reviewing the situation.

I have logged it for review and made it public so you can Follow its status here: https://feedback.telerik.com/blazor/1441685-cannot-clear-dynamically-created-series.

I am sorry to say that I cannot offer a workaround for the time being. Disposing the entire chart component through its parent may help, but that would require exposing and handling events and more collections on the parent component, and that would couple them tightly.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor