How to move x-axis grids on chart whenever a data is added on the chart

Question

// gridlines are not moving along as the line point changes. what code should I add to make it look like the cpu performance chart?

    Series test1 = new Se         


        

Answer 1

You can use Grid.IntervalOffset property:

int GridlinesOffset = 0;

// ...

// In chart update loop:

// Make gridlines move.
chart.ChartAreas[0].AxisX.MajorGrid.IntervalOffset = -GridlinesOffset;

// Calculate next offset.
GridlinesOffset++;
GridlinesOffset %= (int) chart.ChartAreas[0].AxisX.MajorGrid.Interval;

Check out timer_Tick() method in the following example.

using System;
using System.Drawing;
using System.Windows.Forms;

namespace CPUPerformanceChart
{
    public partial class Form1 : Form
    {
        private int GridlinesOffset = 0;

        public Form1()
        {
            InitializeComponent();

            Color axisColor = Color.FromArgb(100, 100, 100);
            Color gridColor = Color.FromArgb(200, 200, 200);
            Color backColor = Color.FromArgb(246, 246, 246);
            Color lineColor = Color.FromArgb(50, 50, 200);

            chart.Series[0].Color = lineColor;

            chart.ChartAreas[0].BackColor = backColor;

            chart.ChartAreas[0].BorderWidth = 1;
            chart.ChartAreas[0].BorderColor = axisColor;
            chart.ChartAreas[0].BorderDashStyle =
                System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid;

            chart.ChartAreas[0].AxisX.LineColor = axisColor;
            chart.ChartAreas[0].AxisY.LineColor = axisColor;

            chart.ChartAreas[0].AxisX.MajorGrid.LineColor = gridColor;
            chart.ChartAreas[0].AxisY.MajorGrid.LineColor = gridColor;

            chart.ChartAreas[0].AxisX.MajorGrid.Interval = 10;
            chart.ChartAreas[0].AxisY.MajorGrid.Interval = 10;

            // 60 seconds interval.
            chart.ChartAreas[0].AxisX.Minimum = 0;
            chart.ChartAreas[0].AxisX.Maximum = 60;

            chart.ChartAreas[0].AxisY.Minimum = 0;
            chart.ChartAreas[0].AxisY.Maximum = 100;

            chart.ChartAreas[0].AxisX.LabelStyle.Enabled = false;
            chart.ChartAreas[0].AxisY.LabelStyle.Enabled = false;

            chart.ChartAreas[0].AxisX.MajorTickMark.Enabled = false;
            chart.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;

            for (int i = 0; i < 60; i++)
            {
                chart.Series["Series1"].Points.AddY(0);
            }
        }

        // timer.Interval = 1000.
        private void timer_Tick(object sender, EventArgs e)
        {
            float nextValue = cpuPerformanceCounter.NextValue();

            labelCpuUsage.Text = String.Format("{0:0.00} %", nextValue);

            chart.Series["Series1"].Points.AddY(nextValue);
            chart.Series["Series1"].Points.RemoveAt(0);

            // Make gridlines move.
            chart.ChartAreas[0].AxisX.MajorGrid.IntervalOffset = -GridlinesOffset;

            // Calculate next offset.
            GridlinesOffset++;
            GridlinesOffset %= (int) chart.ChartAreas[0].AxisX.MajorGrid.Interval;
        }
    }
}

The result is:

CPU Performance Chart

Answer 2

You have two options:

• You can delete the oldest DataPoints from the beginning, starting once you have more than some number of points.
• You can set a Minimum and Maximum for the X-Axis to control the displayed range.

The former option is what you eventually need to do anyway if you are adding DataPoints fast or long..

You may also want to use zooming to look back into the past. If you need to keep the data, you could still add the removed points into a list in memory and bring them back when needed.