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

问题

// 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 Series();
    Series test2 = new Series();

    private void Form1_Load(object sender, EventArgs e)
    {        
        test1.Color = Color.Blue;
        test1.ChartType = SeriesChartType.FastLine;
        test1.BorderWidth = 2;

        test2.Color = Color.Red;
        test2.ChartType = SeriesChartType.FastLine;
        test2.BorderWidth = 2;

        chart1.Series.Add(test1);
        chart1.Series.Add(test2);

        chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = true;
        chart1.ChartAreas[0].AxisX.IsStartedFromZero = true;
        chart1.ChartAreas[0].AxisX.IntervalOffsetType = DateTimeIntervalType.Number;         
    }

    private void timer1_Tick(object sender, EventArgs e)
    {
        Axis xaxis = chart1.ChartAreas[0].AxisX;
        xaxis.Minimum = xaxis.Maximum - 10;
        Random rnd = new Random();
        int dice = rnd.Next(1, 7); 
        float num1 = rnd.Next(1, 13);
        test1.Points.Add(num1);
        test2.Points.Add(dice);
        chart1.ResetAutoValues();
    }

回答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

回答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.

来源：https://stackoverflow.com/questions/31667086/how-to-move-x-axis-grids-on-chart-whenever-a-data-is-added-on-the-chart

标签

charts

real-time