Automatic Updates

View model

using System;
using System.Collections.ObjectModel;
using System.Linq;
using CommunityToolkit.Mvvm.Input;
using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;

namespace ViewModelsSamples.Lines.AutoUpdate;

public partial class ViewModel
{
    private readonly Random _random = new();

    // We use the ObservableCollection class to let the chart know // mark
    // when a new item is added or removed from the chart. // mark
    public ObservableCollection<ISeries> Series { get; set; }

    // The ObservablePoints property is an ObservableCollection of ObservableValue // mark
    // it means that the chart is listening for changes in this collection // mark
    // and also for changes in the properties of each element in the collection // mark
    public ObservableCollection<ObservableValue> ObservableValues { get; set; }

    public ViewModel()
    {
        ObservableValues = [
            new() { Value = 2 },
            new() { Value = 5 },
            new() { Value = 4 }
        ];

        Series = [
            new LineSeries<ObservableValue>(ObservableValues)
        ];
    }

    [RelayCommand]
    public void AddItem()
    {
        var randomValue = _random.Next(1, 10);

        // the new value is added to the collection // mark
        // the chart is listening, and will update and animate the change // mark

        ObservableValues.Add(new() { Value = randomValue });
    }

    [RelayCommand]
    public void RemoveItem()
    {
        if (ObservableValues.Count == 0) return;

        // the last value is removed from the collection // mark
        // the chart is listening, and will update and animate the change // mark

        ObservableValues.RemoveAt(0);
    }

    [RelayCommand]
    public void UpdateItem()
    {
        var randomValue = _random.Next(1, 10);
        var lastItem = ObservableValues[ObservableValues.Count - 1];

        // becase lastItem is an ObservableObject and implements INotifyPropertyChanged // mark
        // the chart is listening for changes in the Value property // mark
        // and will update and animate the change // mark

        lastItem.Value = randomValue;
    }

    [RelayCommand]
    public void ReplaceItem()
    {
        var randomValue = _random.Next(1, 10);
        var randomIndex = _random.Next(0, ObservableValues.Count - 1);

        // replacing and item also triggers the chart to update and animate the change // mark

        ObservableValues[randomIndex] = new(randomValue);
    }

    [RelayCommand]
    public void AddSeries()
    {
        var values = Enumerable.Range(0, 3)
            .Select(_ => _random.Next(0, 10))
            .ToArray();

        // a new line series is added to the chart // mark

        Series.Add(new LineSeries<int>(values));
    }

    [RelayCommand]
    public void RemoveSeries()
    {
        if (Series.Count == 1) return;

        // the last series is removed from the chart // mark

        Series.RemoveAt(Series.Count - 1);
    }
}

// All LiveCharts objects (Series, Axes, etc) implement INotifyPropertyChanged // mark
// this means that the chart is listening for changes in the properties // mark
// the chart will reflect the changes and animate them // mark

using System.Threading.Tasks;
using Eto.Forms;
using LiveChartsCore.SkiaSharpView.Eto;
using ViewModelsSamples.Lines.AutoUpdate;

namespace EtoFormsSample.Lines.AutoUpdate;

public class View : Panel
{
    private readonly CartesianChart cartesianChart;
    private readonly ViewModel viewModel;
    private bool? isStreaming = false;

    public View()
    {
        viewModel = new ViewModel();

        cartesianChart = new CartesianChart
        {
            Series = viewModel.Series,
        };

        var b1 = new Button { Text = "Add item" };
        b1.Click += (object sender, System.EventArgs e) => viewModel.AddItem();

        var b2 = new Button { Text = "Replace item" };
        b2.Click += (object sender, System.EventArgs e) => viewModel.ReplaceItem();

        var b3 = new Button { Text = "Remove item" };
        b3.Click += (object sender, System.EventArgs e) => viewModel.RemoveItem();

        var b4 = new Button { Text = "Add series" };
        b4.Click += (object sender, System.EventArgs e) => viewModel.AddSeries();

        var b5 = new Button { Text = "Remove series" };
        b5.Click += (object sender, System.EventArgs e) => viewModel.RemoveSeries();

        var b6 = new Button { Text = "Constant changes" };
        b6.Click += OnConstantChangesClick;

        var buttons = new StackLayout(b1, b2, b3, b4, b5, b6) { Orientation = Orientation.Horizontal, Padding = 2, Spacing = 4 };

        Content = new DynamicLayout(buttons, cartesianChart);
    }

    private async void OnConstantChangesClick(object sender, System.EventArgs e)
    {
        isStreaming = isStreaming is null ? true : !isStreaming;

        while (isStreaming.Value)
        {
            viewModel.RemoveItem();
            viewModel.AddItem();
            await Task.Delay(1000);
        }
    }
}

Articles you might also find useful: