Chart not updating?

Radzen.Blazor Components
5

If this event executes outside of Blazor context you may have to use InvokeAsync to force an update. Also do chartData = chartData.ToList() this will update the Data property of the series and make it update. I agree this is not intuitive - we will add a check for the count of the Data property value to detect adding and removing items.

void OnWSSEvent(object sender, Services.WSSEventArgs args)
{
      if (args.me != null)
      {
         InvokeAsync(async () => 
         {
           me = args.me;
           ChartDataItem d = new ChartDataItem() { stamp = DateTime.Now, cpuActive = me.DeviceStats.CpuActive };
           chartData.Add(d);
           if (chartData.Count > 100)
               chartData.RemoveAt(0);
           chartData = chartData.ToList(); // Update the chartData reference
           await chart0.Reload();
          });
      }
}

Here is how this works with a timer:

And here is the sample page that I used to produce this animated gif:
linechart

@page "/line-chart"

<RadzenChart ColorScheme="ColorScheme.Pastel" @ref="chart0">
<ChildContent>
  <RadzenCategoryAxis FormatString="{0:mm.ss.ff}">
	<ChildContent>
	  <RadzenAxisTitle Text="Date">
	  </RadzenAxisTitle>
	</ChildContent>
  </RadzenCategoryAxis>
  <RadzenLineSeries CategoryProperty="stamp" Data="@chartData" Title="CPU Active" ValueProperty="cpuActive">
	<ChildContent>
	  <RadzenMarkers MarkerType="MarkerType.Auto">
	  </RadzenMarkers>
	</ChildContent>
  </RadzenLineSeries>
  <RadzenValueAxis>
	<ChildContent>
	  <RadzenAxisTitle Text="Cpu Usage">
	  </RadzenAxisTitle>
	</ChildContent>
  </RadzenValueAxis>
</ChildContent>
</RadzenChart>
@code {
public class ChartDataItem
{
	public DateTime stamp { get; set; }
	public double cpuActive { get; set; }
}
    RadzenChart chart0;
	public List<ChartDataItem> chartData = new List<ChartDataItem>();	

    protected override void OnInitialized()
    {
        System.Timers.Timer timer = new System.Timers.Timer();
        timer.Interval = 1000; // 3 secs in milliseconds
        timer.Elapsed += OnTimedEvent;
        timer.AutoReset = true;
        timer.Enabled = true;
    }

	void OnTimedEvent(object source, System.Timers.ElapsedEventArgs e)
	{
        InvokeAsync(async () =>
        {
            ChartDataItem d = new ChartDataItem() { stamp = DateTime.Now, cpuActive = new Random().NextDouble() * 1000 };
            chartData.Add(d);
            if (chartData.Count > 100)
                chartData.RemoveAt(0);
            chartData = chartData.ToList();
            await chart0.Reload();
        });
	}
}
2 Likes