How to model a scrolling line graph in WPF?

Question

I'm trying to re-learn WPF and I've started a little project that has a line graph, kind of like the CPU performance one you would see in Taskmanager. The graph is basically a canvas that has a punch of lines added to it's children and is based on an Avalon sample I found here http://msdn.microsoft.com/en-us/library/aa480159.aspx

Currently, when I get to the far right edge of the graph I clear my data set and reset my x-coordinate back to zero and the graph starts redrawing from the left hand side after a clear.

y = value;
x = x + 1;
if (x == samples)
{
    CpuGraphAnimation2d.Children.RemoveRange(0, samples);
    x = 0;
}

What I want to do is have the graph 'scroll' to the left as new values arrive, and effectively have all the old values shuffle to the left and drop the left most value.

What would be the most efficient way to achieve this effect in WPF?

Answer 1

You could try creating a StreamGeometry as follows, removing the first element of yourarray before doing the following:

        StreamGeometry sg = new StreamGeometry();

        using (StreamGeometryContext context = sg.Open())
        {
            context.BeginFigure(new Point(0, yourarray[0]), false, false);
            for (int x = 0; x < len; x++)
            {
                context.LineTo(new Point(x, yourarray[x], true, true);
            }

            sg.Freeze();
            System.Windows.Shapes.Path path = new System.Windows.Shapes.Path();
            path.Data = sg;
            path.Stroke = Brushes.Red;
        }

which is a fast way of regenerating your graph each pass. the path created at the end of the code would need to be added to a control or panel in your window.