Can't update OxyPlot graph after initialisation

Question

I have a a OxyPlot chart definied in my XAML like this:

<oxy:Plot Height="336">
    <oxy:Plot.Series>
        <oxy:LineSeries ItemsSource="{Binding Chart}"/>
    </oxy:Plot.Series>
</oxy:Plot>

In the viewModel I have the following:

public ObservableCollection<DataPoint> Chart { get; private set; }

public MainViewModel()
{
    Chart = new ObservableCollection<DataPoint>() 
            { new DataPoint(12, 14), new DataPoint(20, 26) };

    public void PriceChange(Model[] quotes)
    {
        for (int i = 0; i < quotes.Length; i++)         
        {
            Chart.Add(new DataPoint(quotes[i].LastTradePrice, i*10));          
        }
    }
}

I can see the initial graph drawn for the initial two hardcoded DataPoints.

But after everything is up and the PriceChange() method is firing, the new DataPoints aren't drawn on the chart. Since it's an ObservableCollection it should notify the UI automatically, shouldn't it? Or what am I missing?

BTW I have following this example on the documentation.

Johan Larsson · Answer 1 · 2017-08-17T10:32:49.167

4

You can do:

<oxy:Plot InvalidateFlag="{Binding DataPoints.Count, Delay=20}">
    <oxy:Plot.Series>
        <oxy:LineSeries ItemsSource="{Binding DataPoints}"/>
    </oxy:Plot.Series>
</oxy:Plot>

In your case the Delay is not needed but it can be useful at times.

edited Aug 17 '17 at 10:32

answered Jun 26 '14 at 18:37

Johan Larsson

17,112
9
74
88

Chris · Accepted Answer · 2014-02-20T22:07:07.023

Although the Chart ObservableCollection will be providing appropriate notifications, I don't think the chart/plot itself will necessarily be responding to those notifications, so it may well not know it needs to be redrawn.

I'm not familiar with OxyPlot, but I had a quick crack at following a tutorial, and from a quick scan of the Plot class, I found a method called InvalidatePlot(), which seems to force the plot to redraw itself - it may well be the case that you need to call that if you're intend on making changes to the plot data. It certainly worked when I tried it in a small sample project.

I didn't find a huge amount of example usage, however these links may help:

http://oxyplot.codeplex.com/discussions/398856

http://oxyplot.codeplex.com/discussions/352003

And this is the example referred to in the second of those links:

http://oxyplot.codeplex.com/SourceControl/latest#Source/Examples/WPF/WpfExamples/Examples/CoupledAxesDemo/

Edit:

It looks like the intended approach may well be to create a PlotModel and bind the Model property of your plot to it, you can then notify the UI when the PlotModel changes:

oxyplot.codeplex.com/SourceControl/latest#Source/Examples/WPF/WpfExamples/Examples/RealtimeDemo/

Its quite strange, how it works. I needed to look at `RefreshDemo` example to figure it out. Its the only demo that uses multithreading. How they do that is to set a strange `RefreshFlag` like this: ` ` to actually refresh it. Feels hacky, but it works. :) — Houman, Feb 21 '14 at 00:18
Ah, that sounds like a much better approach, you could even put it as an answer, good job =D — Chris, Feb 21 '14 at 09:24

Can't update OxyPlot graph after initialisation

2 Answers2

Linked