Adding points to the left side of a chart

Question

In WinForms, I'm trying to create an interactive chart but am having difficulties with one aspect. I am using System.Windows.Forms.DataVisualization.Charting.Chart for the chart, and using a FastLine series to render the data.

In this chart, you can zoom/pan/change channels, and new points are dynamically added / removed as needed. The reason for this is that the source of these points is a large binary file that can be well over a gigabyte, and I am using a MemoryMappedFile to pull as little data as possible to increase performance.

When panning to the right, everything works fine - new points are added to the end of the list and you can't even tell that they were not there a second ago.

However, when I pan to the left, the graph displays in a very odd way. There are lines running all over the place. I know what is happening here, I just can't figure out how to fix it.

The cause is that when a point is added, a line is drawn from the last point added to the new one. So if the last point was added to the right side, and the new point is added to the left side, a line will shoot across the graph.

Here is the code that adds points to the graph:

for (var i = scanStart; i + _step <= scanEnd; i += _step)
{
   var sample = _expeData.ReadSample(channel, i);
   Series[0].Points.AddXY(i, sample);
}

Is there any way to prevent this from happening? Here is a screenshot showing what it looks like after panning to the left:

Answer 1

I decided to experiment with using LINQ to handle sorting.

        // Suspend updates prior to insertion to speed everything up
        chart1.Series[0].Points.SuspendUpdates();

        // Do a quicky population for testing purposes
        for (int i = 0; i < 100; i++)
        {
            chart1.Series[0].Points.AddXY(i, i);
        }
        for (int i = -100; i < 0; i++)
        {
            chart1.Series[0].Points.AddXY(i, -i * 2);
        }

        // Sort the data points
        var newDataPoints =
            (from d in chart1.Series[0].Points
             orderby d.XValue
             select new { XValue = d.XValue, YValue = d.YValues[0] }).ToList();

        // Replace the datapoints
        chart1.Series[0].Points.DataBind(newDataPoints, "XValue", "YValue", "");

        // Turn updates back on
        chart1.Series[0].Points.ResumeUpdates();

Answer 2

That's a cool control that I've never noticed before. Please do not mark my post as an answer. It is just talking out loud.

Could you clear the chart and reassign the data on a LEFT PAN?

You could declare some variables global to your class:

private int x_index;
private DataTable m_dataTable;

In your Chart's constructor, wire up the AxisViewChanging and AxisViewChanged event handlers:

public Form1() {
  InitializeComponent();
  x_index = -1;
  if (graph1.Series == null) {
    graph1.Series = new SeriesCollection();
  }
  graph1.AxisViewChanging += new EventHandler<ViewEventArgs>(graph1_AxisViewChanging);
  graph1.AxisViewChanged += new EventHandler<ViewEventArgs>(graph1_AxisViewChanged);
}

Now, modify your Get Data routine to collect the data into your new DataTable:

private void GetData(string channel, int scanStart, int step, int scanEnd) {
  m_dataTable = new DataTable();
  var col1 = m_dataTable.Columns.Add("Index", typeof(int));
  var col2 = m_dataTable.Columns.Add("Data", typeof(Series));
  for (var i = scanStart; i + step <= scanEnd; i += step) {
    var sample = _expeData.ReadSample(channel, i);
    var row = m_dataTable.NewRow();
    row[col1] = i;
    row[col2] = new Series(sample);
    m_dataTable.Rows.Add(row);
  }
}

The Changing handler below just records what your current index is:

private void graph1_AxisViewChanging(object sender, ViewEventArgs e) {
  // below is probably wrong, but basically, get the x_axis before the data changes
  x_index = Convert.ToInt32(graph1.Series[0].XValueMember);
}

The Changed handler below is used to display data before x_index that you collected above:

private void graph1_AxisViewChanged(object sender, ViewEventArgs e) {
  var index = Convert.ToInt32(graph1.Series[0].XValueMember);
  if (index < x_index) {
    graph1.Series.Clear();
    for (int i = index; i < index + 50; i++) {
      var pt = (Series)m_dataTable.Rows[i]["Data"];
      graph1.Series.Add(pt);
    }
  }
}

In the above, the value 50 would be whatever you were wanting to count to. It should really be specified as a variable or constant somewhere in your code so that it does not look like a Magic Number.

I'm not sure if this works how you want.

If it does, it would need to be tweaked to account for your values when someone pans to the RIGHT - because my code likely breaks that functionality. ;)

Answer 3

Did you tried to use the InsetXY method?

chart.Series[0].Points.InsertXY(0, i, sample)

With that you will always add to the first position.

Don't know if that fits your problem.

Answer 4

I found the solution was to make use of the Series[0].Sort() function. I modified the original code as follows:

for (var i = scanStart; i + _step <= scanEnd; i += _step)
{
    var sample = _expeData.ReadSample(_channel, i);
    Series[0].Points.AddXY(i, sample);
}

Series[0].Sort(new PointComparer());

And I added a private class to handle the sorting:

private class PointComparer : IComparer<DataPoint>
{
    public int Compare(DataPoint x, DataPoint y)
    {
        return (int)(x.XValue - y.XValue);
    }
}

This sorts the points based on XValue. There is a slight performance hit when the number of points starts to grow above roughly 40,000. However, I can mitigate that by only loading as many points as are visible on screen (max of roughly 2,000 on a modern wide screen monitor) and then trimming once I exceed a certain amount (I'm using 20,000). This causes an occasional hiccup after a relatively large amount of panning, but it isn't very noticable.