Mong Zhu Mong Zhu - 1 year ago 352
C# Question

Smooth scroling in chart with datetime x axis

I have this simple graph plotted in a chart. On the X-axis the values are


public partial class Form1 : Form

List<double> valuelist = new List<double>();
List<DateTime> timelist = new List<DateTime>();

public Form1()

// fill the lists with values
for (int i = 0; i < 2000; i++)
double value = Math.Sin(i/20.0);
timelist.Add(DateTime.Now.AddMinutes(i + 2));

// add the Values to the chart
for (int i = 0; i < valuelist.Count; i++)
this.chart1.Series[0].Points.AddXY(timelist[i], valuelist[i]);

this.chart1.ChartAreas[0].AxisX.LabelStyle.Format = "dd.MM-hh:mm";


private void Form1_Load(object sender, EventArgs e)

chart1.Series[0].XValueType = ChartValueType.DateTime;

chart1.ChartAreas[0].AxisX.Maximum = timelist.Max().ToOADate();
chart1.ChartAreas[0].AxisX.Minimum = timelist.Min().ToOADate();

chart1.ChartAreas[0].CursorX.AutoScroll = true;
chart1.ChartAreas[0].CursorY.AutoScroll = true;

chart1.ChartAreas[0].CursorX.IsUserSelectionEnabled = true;
chart1.ChartAreas[0].CursorY.IsUserSelectionEnabled = true;

chart1.ChartAreas[0].AxisX.ScaleView.Zoomable = true;
chart1.ChartAreas[0].AxisY.ScaleView.Zoomable = true;

DateTime intervall = timelist.Min().AddHours(3);

chart1.ChartAreas[0].AxisX.ScaleView.Zoom(chart1.ChartAreas[0].AxisX.Minimum, intervall.ToOADate());

// disable zoom-reset button
chart1.ChartAreas[0].AxisX.ScrollBar.ButtonStyle = ScrollBarButtonStyles.SmallScroll;

// set scrollbar small change to blockSize
chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollSize = intervall.ToOADate();


My problem is that I cannot get the scrollbar to move smoothly. When I plot only the Y-Values and use just
values for the
and for
it works like a charm. But as soon as I use
for the X-Values I can only scroll in steps. Does someone know how to surpass this? I have the feeling that this piece of code is the obstacle:

// set scrollbar small change to blockSize (e.g. 100)
chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollSize = intervall.ToOADate();


The Interval for the X-Axis is automatic, the range is set by the ZoomLevel of
. Here is a picture:

enter image description here


The Values for the X-Axis are DateTime-Values simulating a sampling of 1 value every 2 minutes:

timelist.Add(DateTime.Now.AddMinutes(i + 2));

Because it is a lot of values I did not set an interval.
The code is posted this way, so that it can be copied as it is and run right away to try it out.

Answer Source

You scrolling interval is wrong.

It should not be the start of your data but the step you want to go when scrolling.

Looks like you want to scroll by 3 hours?

Here is what you do:

chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollSizeType = DateTimeIntervalType.Hours;
chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollSize = 3;

If you wanted to use a DateTime.ToOADate double to achieve the same you need it to start at the first day of the DataTime data type (0aka 'dawn of time' aka 1899-12-30) and then add 3 hours:

 DateTime interval = DateTime.FromOADate(0).AddHours(3);
 chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollSizeType = DateTimeIntervalType.Number;
 chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollSize = interval.ToOADate();

To allow dragging the lift smoothly this may work better than setting the SmallScrollSize:

chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollMinSizeType  =DateTimeIntervalType.Minutes;
chart1.ChartAreas[0].AxisX.ScaleView.SmallScrollMinSize = 60;

Use your unit and numbers! This will only work if you don't set the SmallScrollMinSize.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download