Dynamic Data Display with ObservableCollection

Question

I dont know how to display some points using ObservableCollection. This is my code:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
    Title="MainWindow" Height="350" Width="525">

<Grid>

    <d3:ChartPlotter x:Name="Plotter" Margin="100,5,0,0">
        <d3:LineGraph />
    </d3:ChartPlotter>

    <Button x:Name="button"
            Content="Load Graph"
            HorizontalAlignment="Left"
            Margin="10,35,0,0"
            VerticalAlignment="Top"
            Width="70"
            Height="45" Click="button_Click"/>

</Grid>

public partial class MainWindow : Window
{
    public ObservableCollection<Point> Data { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        Data = new ObservableCollection<Point>();
        Plotter.DataContext = this;
    }

    private void button_Click(object sender, RoutedEventArgs e)
    {
        double[] my_array = new double[10];

        for (int i = 0; i < my_array.Length; i++)
        {
            my_array[i] = Math.Sin(i);
            Data.Add(new Point(i, my_array[i]));
        }
    }
}

Could anyone show me how to do this? Probably I have to add something in XAML like ItemsSource="Data" but i couldn't find that one. Thank you.

Answer 1

Use Plotter.AddLineGraph(Data);:

using Microsoft.Research.DynamicDataDisplay;
using Microsoft.Research.DynamicDataDisplay.DataSources;     

private void button_Click(object sender, RoutedEventArgs e)
            {
                double[] my_array = new double[10];

                for (int i = 0; i < my_array.Length; i++)
                {
                    my_array[i] = Math.Sin(i);
                    Data.Collection.Add(new Point(i, my_array[i]));
                }
                Plotter.AddLineGraph(Data);
            }

EDIT: Here's my full working code using MVVM, so you don't need to use AddLineGraph:

XAML:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
    <d3:ChartPlotter>
        <d3:LineGraph DataSource="{Binding Data}"></d3:LineGraph>
    </d3:ChartPlotter>
</Grid>

CS:

public partial class MainWindow : Window
    {
        MyViewModel viewModel;

        public MainWindow()
        {
            InitializeComponent();

            viewModel = new MyViewModel();
            DataContext = viewModel;
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            double[] my_array = new double[10];

            for (int i = 0; i < my_array.Length; i++)
            {
                my_array[i] = Math.Sin(i);
                viewModel.Data.Collection.Add(new Point(i, my_array[i]));
            }
        }
    }

ViewModel:

using Microsoft.Research.DynamicDataDisplay.DataSources;

public class MyViewModel
    {
        public ObservableDataSource<Point> Data { get; set; }

        public MyViewModel()
        {
            Data = new ObservableDataSource<Point>();
        }
    }