I am using Blazor Web Assembly 3.2.1 and SF Blazor 18.2.0.55
I am unable to dynamically add ChartSeries to a Chart component where each ChartSeries.DataSource property is set to a unique ObservableCollection.
I add data to the several ObservableCollections over SignalR connections and call Chart.RefreshLiveData() but the Chart is not updated.
I use the code found in the StreamingChart.razor (was unable to paste code in this thread, so attached it as zip file).
But if I use a declarative approach (which is not dynamic) then it works, as seen in the DeclarativeSeriesCollection in StreamingChart.razor
Seems like the Chart.AddSeries() does not setup any event handlers to monitor the ObservableCollection, whereas the declarative approach does.
Is this a supported scenario, combining dynamic ChartSeries and ObservableCollections?
code (without semi-colons)
@using System.Collections.ObjectModel
@using Syncfusion.Blazor.Charts
// markup removed by editor, see attachment for full code sample
@code {
SfChart Chart1
SfChart Chart2
Dictionary
Dictionary
{
{ "id1", new ObservableCollection
{ "id2", new ObservableCollection
{ "id3", new ObservableCollection
}
protected override void OnInitialized()
{
// setup signal connection to invoke NewDataStreamed when data arrives
}
// Called by SignalR, when new data arrives
private async Task NewDataStreamed(MyData data)
{
DynamicSeriesCollection[data.Id].Add(data)
await Chart1.RefreshLiveData()
DeclarativeSeriesCollection[data.Id].Add(data)
await Chart2.RefreshLiveData()
}
public async Task StartStreamAsync(string seriesId)
{
// add series to chart
if (!DynamicSeriesCollection.ContainsKey(seriesId))
{
DynamicSeriesCollection.Add(seriesId, new ObservableCollection
var seriesCollection = new List
seriesCollection.Add(new ChartSeries
{
Name = seriesId,
XName = nameof(MyData.Timestamp),
YName = nameof(MyData.Value),
DataSource = DynamicSeriesCollection[seriesId], // ObservableCollection per ChartSeries
Type = ChartSeriesType.Line
})
await Chart1.AddSeries(seriesCollection) // does not seem to listen for data changes in ObservableCollection
}
// call server to start streaming data
StateHasChanged()
}
public class MyData
{
public string Id { get }
public DateTime Timestamp { get set }
public double Value { get set }
}
}