Chart Auto Scroll (Oscilloscope Effect)

My issue is that whenever I add a point to the chart, it compresses all the points. Instead, I want it to auto scroll.

Here are two .gifs to explain what my issue is

What I have now

enter image description here

What I want to achieve

enter image description here

The code I have right now is

    DateTime dt;

    private void Form1_Load(object sender, EventArgs e)
    {
        timer1.Start();
    }

    private void timer1_Tick(object sender, EventArgs e)
    {
        dt = DateTime.Now;
        if (checkBox1.Checked)
        {
            chart1.Series["Light"].Points.AddXY(dt.ToShortTimeString(), 1);
        }
        else
        {
            chart1.Series["Light"].Points.AddXY(dt.ToShortTimeString(), 0);
        }

    }

Solution 1:

You have a choice of options:

  • You can remove a point from the left for each point you add to the right (after a certain number)

  • You can shift the x-Axis Minimum and Maximum values

  • You can set the chart to zoom&pan and then pan, i.e. move the ScaleView

The first option is simple and will keep the number of DataPoints constant. This may be good or bad, depending on your needs.

The other two will keep the collection of points and only pan in the chart.

Common references:

ChartArea ca = chart.ChartAreas[0];
Series s = chart.Series[0];

Here is code for the 1st option:

s.Points.AddXY(..);
s.Points.RemoveAt(0);
ca.AxisX.Minimum = double.NaN;
ca.AxisX.Maximum = double.NaN;
ca.RecalculateAxesScale();

Here is code for option 2:

int ix = s.Points.AddXY(..);

ca.AxisX.Maximum  = s.Points[ix].XValue;
ca.AxisX.Minimum += s.Points[ix].XValue - s.Points[ix-1].XValue;
ca.RecalculateAxesScale();

Here is code for option 3:

int ix = s.Points.AddXY(..);
ca.AxisX.Minimum = double.NaN;
ca.AxisX.Maximum = double.NaN;
ca.RecalculateAxesScale();

ca.AxisX.ScaleView.Zoom(s.Points[ix-pointMax ].XValue, s.Points[ix].XValue );

This assumes there are pointMax points already in the series.

All examples assume you have already a few points. Options 1&3 also assume neither Minimum nor Maximum of the x-axis are set, i.e. they are double.NaN.

The last option will let you scroll around the data conveniently.

The 1st one keeps the data points count low but loses all but the last points.

Let's watch all options at work:

enter image description here

Do note that options 2&3 also assume that you have valid x-values. If you don't, you need to make the x-axis indexed and use the point index instead of the values.