Using a chart to show my updated data per second on WPF

Question

I am trying to get my CPU usage every second. I have the code setup for this so no issue there. I am trying to represent this information on a line chart. I am using wpf toolkit. I intend to have the chart somewhat similar to the image below. y-axis containing the seconds, x-axis containing the cpu usage.

So its like the seconds and cpu usage keeps updating on the chart. (I would like some advice on a better way to present my CPU usage on a chart if this is not a good method.)

I am trying to find a way to setup my dispatcherTimer which is ticking every second to be updated on y-axis.

This is how my current chart looks.

I know its nothing much but I am really not sure how to go about setting it up to what I am looking for. I believe I have to work on the pointcollection values but not able to directly replace the numbers with timer.tick (dispatchtimer).

The code for the chart as follow:

<chartingToolkit:Chart Canvas.Left="25" Canvas.Top="307" Title="CPU Usage">
                    <chartingToolkit:Chart.DataContext>
                        <PointCollection>1,10 2,20 3,30 4,40</PointCollection>
                    </chartingToolkit:Chart.DataContext>
                    <chartingToolkit:LineSeries DependentValuePath="X" IndependentValuePath="Y" ItemsSource="{Binding}" Title="Cpu Usage">
                        <chartingToolkit:LineSeries.Background>
                            <RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                                <GradientStop Color="#FFA9A3BD"/>
                                <GradientStop Color="#FF6C5B2C" Offset="1"/>
                            </RadialGradientBrush>
                        </chartingToolkit:LineSeries.Background>
                    </chartingToolkit:LineSeries>
                </chartingToolkit:Chart>

I understand there is a good chance the question is not clear but I don't know how else to put it. I am unable to find any guide references for this either. I can post my codes that are retrieving the CPU usage results (every seconds) if that would help to understand better. Didn't want to junk up the question with too much information. Thanks for any guidance.

Code to calculate CPU Usage Per Sec:

class Monitor
{
    Stats stats = new Stats();

    public delegate void CPUEventHandler(object sender, CPUEventArgs args);
    public event CPUEventHandler CPUEvent;

    DispatcherTimer timer = new DispatcherTimer();

    private static double cpuCurrent;

    public Monitor()
    {
        timer.Interval = TimeSpan.FromSeconds(1);
        timer.Tick += TimeChanged;
        timer.Start();
    }

    void TriggerCPUEvent(CPUEventArgs args)
    {
        if (CPUEvent != null)
        {
            CPUEvent(this, args);
        }
    }

    public void TimeChanged(object sender, EventArgs e)
    {
        cpuCurrent = stats.GetCurrentCpuUsage();

        TriggerCPUEvent(new CPUEventArgs(cpuCurrent));
    }
}

class Stats
{
    private PerformanceCounter cpuCounter;

    public Stats()
    {
        cpuCounter = new PerformanceCounter("Processor", "% Processor Time", "_Total");
    }

    public float GetCurrentCpuUsage()
    {
        return cpuCounter.NextValue();
    }
}

Answer 1

1. Define data model to feed your chart (ObservableCollection> in the simplest case)
2. Add some logic to update collection above every time TriggerCPUEvent is raised (variety of options starting from plain event handler to Reactive Extensions aggregate) - keep an eye on size of your collection as WPF Chart won't perform great if you allow your collection to grow indefinitely
3. Bind your line series to underlying collection and voila!

If you need to display larger chunks of data and keep sound level of UI responsiness consider writing your own chart control that interacts with DrawingContext directly - WPF Toolkit chart is not the most performant one