1. Home
  2. Forum
  3. Blazor
  4. How to assign live data to blazor chart?

How to assign live data to blazor chart?

Query: How to assign live data to blazor chart?


Answer: 
We can assign live data value to chart data source. In the sample we have updated the data for the first 60 seconds and then shifted the data towards left after 60 seconds. Here is the code snippet for your reference.

// add your additional code here  

@using Syncfusion.Blazor.Data  

@using Syncfusion.Blazor.Charts  

@using System.Collections.ObjectModel  

@using System.Threading  

 <SfChart EnableAnimation="true" DataSource="@_data" EnableCanvas="true">  

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Seconds"></ChartPrimaryXAxis>  

        <ChartPrimaryYAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Double" StartFromZero="false">               

       </ChartPrimaryYAxis>  

        <ChartSeriesCollection>  

            <ChartSeries XName="TimeStamp" YName="Y" Type="ChartSeriesType.Line">  

            </ChartSeries>  

        </ChartSeriesCollection>  

    </SfChart>  

   

@code {  

    public class ChartData  

    {  

        public DateTime TimeStamp { get; set; }  

        public double Y { get; set; }  

    }  

    private ObservableCollection<ChartData> _data = new ObservableCollection<ChartData>() { };  

    private Timer _timer;  

    private readonly Random _random = new Random();  

    private async void AddData(object? state)  

    {  

        await InvokeAsync(() =>  

        {  

            if (_data.Count >= 60)  

            {  

                _data.RemoveAt(0);  

            }  

             _data.Add(new ChartData() { TimeStamp = DateTime.UtcNow, Y = _random.NextDouble() });  

            base.StateHasChanged();  

        });  

    }  

    protected override void OnInitialized()  

    {  

        _timer = new Timer(AddData, null, TimeSpan.FromSeconds(1), TimeSpan.FromSeconds(1));  

        base.OnInitialized();  

    }  

}


Find the sample for to update live data in chart from here.

1 Reply
SM Srihari Muthukaruppan Syncfusion Team January 12, 2021 07:31 AM UTC

Hi Support, 
 
We have analyzed your query. From that we suspect you are using old version of Syncfusion package. Hence we suggest you to upgrade to our v18.4.33 patch release. And you can use the latest (18.4.33) Syncfusion.EJ2.Blazor NuGet package version and updated interop CDN file to get rid of the reported issue. We request you to kindly include the lodash script in the HEAD element of the ~/Pages/_Host.cshtml page for server side blazor application. In case, if you are using WASM application, include it in the HEAD element of the ~/wwwroot/index.html page. We also suggest you to upgrade the .NET version 5.0 to overcome common issues. 
 
 
 
 
Code Snippet: 
<head> 
</head> 
 
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.  
  
  1. Try to reproduce the reported scenario in the provided sample.  
  2. Steps to reproduce the reported scenario.
 
Regards,   
Srihari 


Loader.
Up arrow icon