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.

are you trying to add this to a listview? – Dark Templar Jul 18 '16 at 16:39 — Dark Templar, Jul 18 '16 at 16:39

jsanalytics · Accepted Answer · 2016-07-18T20:48:02.177

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>();
        }
    }

Data.Collection does not exist and in this NuGet Package I've got something like Plotter.AddLineChart(object data). Do you use a different version of d3? — guinea_piggy, Jul 18 '16 at 19:27
Yea, there's a v0.4.0. I have downloaded your version from https://dynamicdatadisplay.codeplex.com/ but I didn't know what to do with those folders (Sources, DynamicDadaDisplay, DDD.Coastline etc). Could you tell me how do I add it to my project? — guinea_piggy, Jul 18 '16 at 19:58
All i needed was to add a reference to `DynamicDataDisplay.dll` to my project and also the proper `using` as shown above and that was it.... Not sure why you're running into trouble.... — jsanalytics, Jul 18 '16 at 20:11
OK, one difference: I'm using `ObservableDataSource` instead of `ObservableCollection`. — jsanalytics, Jul 18 '16 at 20:37
Please see my **EDIT** for full working code. Also note the use of `ObservableDataSource` instead of `ObservableCollection`. — jsanalytics, Jul 18 '16 at 20:57

score 0 · Answer 2 · answered Jul 18 '16 at 16:30

0

I don't know the namespace declared in the XAML:

xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"

but I can add some suggestions. Ensure that the class Point expose the coordinate values X and Y as public properties. After that, you must ensure that the control ChartPlotter supports XAML binding.

answered Jul 18 '16 at 16:30

Igor Damiani

1,897
9
12

Well, i did this thing using WPF Toolkit's chart. I am almost sure that Points are OK. About the second one: I found here: http://www.mesta-automation.com/real-time-line-charts-with-wpf-and-dynamic-data-display/ some example but the problem is that not every command works with my version of d3 (for example plotter.AddLineGraph()). Mine comes from NuGet Packages. I am also not that experienced that's why i am asking. :) – guinea_piggy Jul 18 '16 at 17:40

Dynamic Data Display with ObservableCollection

2 Answers2

Linked