WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > MVVM API > Worked Example - Manipulate Series in MVVM
Worked Example - Manipulate Series in MVVM

Worked Example: Manipulate Series in MVVM

Series can be added, removed, or the series type changed in MVVM by simply manipulating the collection bound via SeriesBinding.

e.g. Add a LineRenderableSeriesViewModel with an optional style or properties + DataSeries. To change this to a mountain series, simply replace the viewmodel for a MountainRenderableSeriesViewModel.

View (XAML)

Manipulate Series in MVVM
Copy Code 
<UserControl x:Class="WpfApplication3.HelloSciChartWorld"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             xmlns:local="clr-namespace:WpfApplication3"
             mc:Ignorable="d"
             d:DesignHeight="400" d:DesignWidth="600"
             Background="#171717">
    <UserControl.Resources>
        <local:HelloSciChartWorldViewModel x:Key="viewModel"/>

        <Style TargetType="s:FastLineRenderableSeries" x:Key="LineSeriesStyle0">
            <Setter Property="StrokeDashArray" Value="5 5"/>
            <Setter Property="StrokeThickness" Value="2"/>
            <Setter Property="Stroke" Value="Orange"/>
        </Style>

        <Style TargetType="s:FastMountainRenderableSeries" x:Key="MountainSeriesStyle0">
            <Setter Property="StrokeThickness" Value="2"/>
            <Setter Property="Stroke" Value="Orange"/>
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="#AAFF8D42" />
                        <GradientStop Offset="1" Color="#88090E11" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>
   
    <Grid DataContext="{StaticResource viewModel}">
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <CheckBox Content="Line Series?" IsChecked="{Binding IsLineSeries, Mode=TwoWay}" Foreground="White" Margin="5"/>
            <CheckBox Content="Mountain Series?" IsChecked="{Binding IsMountainSeries, Mode=TwoWay}" Foreground="White" Margin="5"/>
        </StackPanel>
       
        <s:SciChartSurface RenderableSeries="{s:SeriesBinding SeriesViewModels}" Grid.Row="1">
            <s:SciChartSurface.XAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis GrowBy="0.1, 0.1"/>
            </s:SciChartSurface.YAxis>

        </s:SciChartSurface>
    </Grid>
</UserControl>

ViewModel

Manipulate Series in MVVM
Copy Code 
public class HelloSciChartWorldViewModel : INotifyPropertyChanged
{
    private readonly ObservableCollection<IRenderableSeriesViewModel> _seriesViewModels = new ObservableCollection<IRenderableSeriesViewModel>();
    private bool _isLineSeries;
    private bool _isMountainSeries;
    private readonly XyDataSeries<double, double> _xyData;

    public event PropertyChangedEventHandler PropertyChanged;

    public HelloSciChartWorldViewModel()
    {
        _xyData = new XyDataSeries<double, double>();
        for (int i = 0; i < 100; i++)
        {
            _xyData.Append(i, Math.Sin(i * 0.2));
        }

        IsLineSeries = true;
    }

    public ObservableCollection<IRenderableSeriesViewModel> SeriesViewModels
    {
        get { return _seriesViewModels; }
    }

    public bool IsLineSeries
    {
        get { return _isLineSeries; }
        set
        {
            if (_isLineSeries == value) return;
            _isLineSeries = value;
            OnPropertyChanged("IsLineSeries");               
            if (value)
            {
                IsMountainSeries = false;
                SyncViewModels();
            }
        }
    }

    public bool IsMountainSeries
    {
        get { return _isMountainSeries; }
        set
        {
            if (_isMountainSeries == value) return;
            _isMountainSeries = value;
            OnPropertyChanged("IsMountainSeries");               
            if (value)
            {
                IsLineSeries = false;
                SyncViewModels();
            }
        }
    }

    private void SyncViewModels()
    {
        if (IsLineSeries)
        {
            SeriesViewModels.Clear();
            SeriesViewModels.Add(new LineRenderableSeriesViewModel() { DataSeries = _xyData, StyleKey = "LineSeriesStyle0"});
        }
        else
        {
            SeriesViewModels.Clear();
            SeriesViewModels.Add(new MountainRenderableSeriesViewModel() { DataSeries = _xyData, StyleKey = "MountainSeriesStyle0" });
        }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }           
    }
}