Graphic creation c#

Question

Good afternoon friends, I am creating a program in c# that should plot in a graph the current values of the serial port (Arduino) in a picture box. To draw the graph I am creating points(x,y) and connecting the same forming lines (drawline). In this way the graphic is drawn, but the "pen" that runs through the picturebox. I’m trying to make an effect similar to a seismograph (as if the paper(picturebox) dislocated, as in the video https://www.youtube.com/watch?v=0cSlxPeqHA8). I believe it is basically to shift several lines. Currently, I am doing it this way:

int contDRAW = 0, a; //contadores
private PointF[] vetpoint = new PointF[6000];//vetor para incrementar o X para fazer o deslocamento
float[] aquisicaoplot = new float[6000]; //vetor onde armazeno cada valor enviado pela serial

//a cada vez que for chamada a função desenhar já tenho um novo y
private void Desenhar()
        {
            vetpoint[contDRAW].Y = aquisicaoplot[contDRAW];
            for (a = 0; a <= contDRAW; a++)
            {
                if (contDRAW != a)
                {
                    vetpoint[a].X ++;
                }
                else vetpoint[a].X = 0;

                if (contDRAW == 0 || a==0) timerDRAW.Enabled = true;
                else graph.DrawLine(new Pen(Color.LightGreen, 0.1f), vetpoint[a - 1].X, 24 * aquisicaoplot[a-1], vetpoint[a].X, 24 *aquisicaoplot[a]);     
            }
            contDRAW++;
        }

private void timerDRAW_Tick(object sender, EventArgs e)
{
    Refresh();
}

This code comes close to the intended result. The chart is currently shifting, but it is reset and redrawn every time it enters "for". What can I do? Am I following the right path? If anyone knows or has any tips on how to do this please reply.

EDIT1:

I updated the Draw() function to the following:

private void Desenhar()
{
    System.Drawing.Pen myPen = new System.Drawing.Pen(System.Drawing.Color.LimeGreen, 0.1f);
    vetpoint[contDRAW].Y = 24*aquisicaoplot[contDRAW];
    for (a = 0; a <= contDRAW; a++)
    {
        if (contDRAW != a) vetpoint[a].X++;
        else vetpoint[a].X = 0;
    }
    if (contDRAW == 0) timerDRAW.Enabled = true;
    else graph.DrawLines(myPen, vetpoint);
    //else graph.DrawLine(myPen, vetpoint[contDRAW - 1].X, 24 * aquisicaoplot[contDRAW-1], vetpoint[contDRAW].X, 24 * aquisicaoplot[contDRAW]);
    contDRAW++;
    myPen.Dispose();
}

I had a small advance in relation to the effect I want to produce, because the graph moves without being redesigned from the beginning, however, now it is with a lot of Flicker and delay after drawing several points.

Answer 1

See if you can help him. Set the Minvalue and Maxvalue and Datacount properties - Amount of data that will come.. Just create a timer and call the Addvalue method every time.

using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace WindowsFormsApp2
{

public class GraphControl : Control
{
    private int _minValue = -100;
    private int _maxValue = 100;
    private int _dataCount = 25;
    private List<int> _values = new List<int>();

    public int MinValue
    {
        get => _minValue;
        set
        {
            _minValue = value;
            Invalidate();
        }
    }
    public int MaxValue
    {
        get => _maxValue;
        set
        {
            _maxValue = value;
            Invalidate();
        }
    }
    public int DataCount
    {
        get => _dataCount;
        set
        {
            _dataCount = value;
            Invalidate();
        }
    }

    public GraphControl()
    {
        Size = new System.Drawing.Size(500, 300);
        SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw, true);
    }

    public void AddValue(int value)
    {
        _values.Add(value);
        Invalidate();
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
        e.Graphics.FillRectangle(Brushes.White, ClientRectangle);
        e.Graphics.DrawRectangle(Pens.Gray, 0, 0, Width - 1, Height - 1);
        e.Graphics.DrawLine(Pens.LightGray, 0F, (float)Height * 0.5F, (float)Width, (float)Height * 0.5F);

        var wid = (float)Width / (float)_dataCount;

        for (var i = 0; i < _dataCount; i++)
            e.Graphics.DrawLine(Pens.LightGray, wid * i, 0F, wid * i, Height);

        var lastPoint = new PointF(0F, (float)Height * 0.5F);
        var idInit = _values.Count - _dataCount;

        if (idInit < 0)
            idInit = 0;

        for (int i = idInit, a = 0; i < _values.Count; i++, a++)
        {
            var value = (float)(_values[i] - MinValue);
            var total = (float)(MaxValue - MinValue);
            var porcent = value / total;
            var hg = porcent * Height;
            var newPoint = new PointF((a + 1) * wid, Height - hg);

            using (var p = new Pen(Color.Maroon, 2))
                e.Graphics.DrawLine(p, lastPoint, newPoint);

            lastPoint = newPoint;
        }

        base.OnPaint(e);
    }
}
}

Add control to your project, Compile and then add to Windows Forms via Toolbox.

Example with random values:

        private void timer1_Tick(object sender, EventArgs e)
    {
        var rd = new Random();
        var num = (rd.Next() % 200) - 100;

        graphControl1.AddValue(num);
    }