Blazor Chart doesnt update in runtime

[Gal Ehrlich]

Hi,

I wrote the below code to change the chart in real-time every time the button is pressed (adding another item to the data source)

It doesnt work, the only way to make it work is if I move the DataSource="@DataSource" from the <ChartSeries> to the <SfChart > tag - but then I cannot add separate data source for additional ChartSeries within the same chart.

I'm using the most recent SyncFusion Blazor package (installed few days ago)

@page "/"

@using System.Collections.ObjectModel

<button @onclick="OnButtonClick">Add item</button>

<SfChart >

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

    <ChartSeriesCollection>

        <ChartSeries DataSource="@DataSource" XName="x" YName="y" Type="ChartSeriesType.Line">

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

@code {

    int counter = 1;

    public class ChartItem

    {

        public int x { get; set; }

        public int y { get; set; }

    }

    public ObservableCollection<ChartItem> DataSource { get; set; } = new ObservableCollection<ChartItem>();

    public void OnButtonClick()

    {

        ChartItem item = new ChartItem() { x = counter, y = new Random().Next(100) };

        DataSource.Add(item);

        counter++;

    }

}

[Srihari Muthukaruppan]

Hi Gal, 

  

We have analyzed your query. From that, we would like to let you know that the line series requires two data to render. Hence we suggest you to initialize the marker to display the data in the chart. And also as of now, we are facing issues while adding data. We have already considered this as a bug and logged a defect report. The fix will either be available in our upcoming patch release which is scheduled to be rolled out on 5th May 2020. We appreciate your patience until then. You can keep track of the bug from the feedback portal below.   

   

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

   

The provided feedback link is private, and you need to login to view this feedback.  

   

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, 

Srihari M 

[Parminder]

Hi Gal Ehrlich,

Please see this link https://www.syncfusion.com/forums/150888/slow-rendering-for-real-time-line-chart

and use this.Chart.RefreshLiveData(); after the DataSource.Add(item);

Note: You can download https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultipleLiveChart1166706392.zip . It is working fine

[Gal Ehrlich]

tnx a lot!!

[Srihari Muthukaruppan]

Hi Gal, 

 

Thanks for the update. 

 

We have analyzed your query. From that, as stated earlier the line series requires two data to render. Hence we suggest you initialize the marker to display the data in the chart on the first click. And as of now, we suggest you to use the RefreshLiveData() method to refresh the new data in chart. Based on that we have also attached the sample for your reference. Please find the below sample, code snippet, and screenshot. 

 

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

  

Code Snippet 

  

<button @onclick="OnButtonClick">Add item</button> 

  

<SfChart @ref="Chart"> 

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

    <ChartSeriesCollection> 

        <ChartSeries DataSource="@DataSource" XName="x" YName="y" Type="ChartSeriesType.Line"> 

        </ChartSeries> 

    </ChartSeriesCollection> 

</SfChart> 

  

  

@code { 

    SfChart Chart; 

    int counter = 1; 

  

    public class ChartItem 

    { 

        public int x { get; set; } 

        public int y { get; set; } 

    } 

    public ObservableCollection<ChartItem> DataSource { get; set; } = new ObservableCollection<ChartItem>(); 

  

    public void OnButtonClick() 

    { 

        ChartItem item = new ChartItem() { x = counter, y = new Random().Next(100) }; 

        DataSource.Add(item); 

        Chart.RefreshLiveData(); 

        counter++; 

    } 

} 

Let us know if you need further assistance. 

  

Regards, 

Srihari M 

[Fabio Angela]

what about StockChart? I don't see any RefreshLiveData available there, I've the need to update my series real time (ideally I've just to update last candlestick item)

thanks

[Srihari Muthukaruppan]

Hi Fabio,  

   

We have analysed your query. From that, we have already considered this scenario as a bug and logged a bug request on this and you can keep track of it from the below feedback portal link.  

     

Feedback Link: https://www.syncfusion.com/feedback/17927/need-to-fix-the-flickering-issue-while-updating-datasource-and-refreshing-chart  

     

This fix will be available in our volume 4 release which is scheduled to be rolled out by the mid of December 2020. We appreciate your patience until then.  

   

Regards,  

Srihari M  

[Fabio Angela]

Hello,

thanks, I got an "Access Denied" error when clicking on the link below

thanks.

[Srihari Muthukaruppan]

Hi Fabio,  

  

We have provided access for the below feedback link. And 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.  

  

Feedback Link: https://www.syncfusion.com/feedback/17927/need-to-fix-the-flickering-issue-while-updating-datasource-and-refreshing-chart   

  

Let us know if you need any other assistance  

  

Regards,  

Srihari 

  

[Joe]

Hi Gal Ehrlich,

Please see this link https://www.syncfusion.com/forums/150888/slow-rendering-for-real-time-line-chart

and use this.Chart.RefreshLiveData(); after the DataSource.Add(item);

Note: You can download https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultipleLiveChart1166706392.zip . It is working fine

Hi,

Is there an example that shows how to combine this with dynamically adding series to the plot?  In this example there are 4 fixed plots.

Also, I've been using SfChart.  Should I really be using EjsChart?

thanks,

[Srihari Muthukaruppan]

Hi Joe, 

 

We have analysed your query. Based on your requirement we have prepared a sample in latest version 18.3.51 with SfChart. Please find the sample and screenshot below. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AddSeriesDynamically-79782692.zip 

 

Code Snippet: 

// add your additional code here 

 

public void AddChartSeries() 

    { 

        List<ChartSeries> seriesCollection = new List<ChartSeries>(); 

        seriesCollection.Add(new ChartSeries { Name = nameof(MyDataModel.XValue), XName = nameof(MyDataModel.XValue), YName = nameof(MyDataModel.YValue), DataSource = this.GetData(), Fill = colors[rnd.Next(colors.Length - 1)], Animation = new ChartSeriesAnimation { Enable = false } }); 

        Chartobj.AddSeries(seriesCollection); 

    } 

 

// add your additional code here 

 

 

Screenshot: 

 

 

Let us know if you have any concerns 

 

Regards, 

Srihari M 

[Srihari Muthukaruppan]

Hi Gal,  

  

Sorry for the inconvenience.    

     

Due to complexity in implementation, we are unable include this fix in our volume 4 release. We will consider this fix in our volume 1 release which is expected to be rolled out by the end of March 2021. We appreciate your patience until then.    

     

Regards,    

Srihari  

[Srihari Muthukaruppan]

Hi Fabio, 

 

We are glad to announce that our Essential Studio 2021 Volume 1 Main release v19.1.0.54 is rolled out and is available for download under the following link.  

 

https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download  

 

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,   

Srihari M