How to update plot using Oxyplot in Windows Form

Question

I am working on a project where I read some serial data from a board, and try to show it on a graph plot. So far I have managed to implement the Oxyplot inside my application.

But I am confused how to update the plot on each new data coming from the serial port?

Here is my code in a simplified version

using OxyPlot;


namespace Motor
{

public partial class Form1 : Form
{ 


    public Form1()
    {
        InitializeComponent();
        ComPort.DataReceived += new 
            System.IO.Ports.SerialDataReceivedEventHandler(port_DataReceived_1);
        plot1.Model = GridLinesHorizontal();

    }

    public static PlotModel GridLinesHorizontal()
    {
        var plotModel = new PlotModel();
        plotModel.Title = "Horizontal";
        var linearAxis1 = new LinearAxis();

        linearAxis1.MajorGridlineStyle = LineStyle.Solid;
        linearAxis1.MinorGridlineStyle = LineStyle.Dot;
        linearAxis1.Maximum = 5;
        linearAxis1.Minimum = -5;
        plotModel.Axes.Add(linearAxis1);

        return plotModel;

    }


    private void port_DataReceived_1(object sender, SerialDataReceivedEventArgs e)
    {

        InputData = ComPort.ReadLine();

        if (InputData != String.Empty)
        {
            this.BeginInvoke(new SetTextCallback(SetText), new object[] { InputData });
        }
    }

    private void SetText(string text)
    {
        dVal = double.Parse(text, CultureInfo.InvariantCulture); // convert to double
        ///// HERE I WANT TO UPDATE THE PLOT with dval
    }

}
}

score 2 · Accepted Answer · edited Feb 16 '18 at 22:04

Not sure if that's the best way of doing it but something like this should work:

using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Series;

namespace Motor
{
    public partial class Form1 : Form
    { 
        public Form1()
        {
           InitializeComponent();
           ComPort.DataReceived += new
                  System.IO.Ports.SerialDataReceivedEventHandler(port_DataReceived_1);
           plot1.Model = GridLinesHorizontal();
           //create new LineSeries and add it to the PlotView
           Line1 = new LineSeries
           {
               Title = "Test Series",
               Color = OxyColors.Red,
               TextColor = OxyColors.Red,
               BrokenLineColor = OxyColors.Red
           };
           plot1.Model.Series.Add(Line1);

       }

       LineSeries Line1; // declare Line1 as global

       public static PlotModel GridLinesHorizontal()
       {
           var plotModel = new PlotModel();
           plotModel.Title = "Horizontal";
           var linearAxis1 = new LinearAxis();

           linearAxis1.MajorGridlineStyle = LineStyle.Solid;
           linearAxis1.MinorGridlineStyle = LineStyle.Dot;
           linearAxis1.Maximum = 5;
           linearAxis1.Minimum = -5;
           plotModel.Axes.Add(linearAxis1);

           return plotModel;

       }

       private void port_DataReceived_1(object sender, SerialDataReceivedEventArgs e)
       {
           InputData = ComPort.ReadLine();

           if (InputData != String.Empty)
           {
               this.BeginInvoke(new SetTextCallback(SetText), new object[] { InputData });
           }
       }
       int plotIndex = 0;
       private void SetText(string text)
       {
           dVal = double.Parse(text, CultureInfo.InvariantCulture); // convert to double
           ///// plotIndex is the x value of the new point, not sure if OxyPlot offers an auto increment option
           Line1.Points.Add(new DataPoint(plotIndex, dVal));
           plotIndex++;
           plot1.Invalidate();
       }
    }
}

thank you for sharing, i will try your sugestion, regarding plotindex, by this i guess you mean the x axis.Well in the future i plan this to be incremented by a timer or something like that. Right now just want to get familiar with oxy — , Feb 16 '18 at 21:40
Yes, plotIndex is the new points position on the x axis. Like this it automatically moves each new data value one to the right of the old one. You could also set the view range of the x axis using the plotIndex variable so it always shows the newest data. — Nikolas Saf, Feb 16 '18 at 21:44
Thank you,it works well now, in the mean time i have noticed there are some diferent versions out there of oxyplot. It is posible to keep the chart focused on the new data and ad a tick base of 1 milisecond? — , Feb 17 '18 at 18:22

How to update plot using Oxyplot in Windows Form

1 Answers1