Improving the performance of drawing a huge number of points with help of mschart component

Question

I am currently working on a windows forms application that has several modules. One of them is responsible for drawing generated simulation data. The idea of the plot is actually simple, but i am struggling to render the data efficiently.

So the questions i have are:

1. what is the best way to draw such a large amount of data?
2. is drawing on a bitmap the right option?
3. am i missing a basic .net framework or so that provides me with this functionality?

The points to draw are provided as a list points in the form of (time, position), i.e. we have two axis.

I tried the following:

I tried drawing the points of all elevators all at once --> is resource intensive and the whole plot is redrawn on resize events. made two tests:

1. draw the whole plot within a predefined viewport, but was not a good idea because the graph becomes messy.
2. defined how many pixels for the time and position (e.g. 1 second = 1 pixel) and made the panel (picturebox inside it) scrollable. this worked better than the first option, but causes an outofmemory exception if the data is too large.

other possible approaches:

define a range for the drawing (e.g. timeRange = 10 mins) and let only that get painted. i imagine a problem with the scrolling, because i would have to redefine the starting point of the drawing (there where the range startpoint is) when the user scrolls.

I would appreciate your help a lot and any suggestions, ideas, comments...etc.

Edit:

I tried the suggestions of Patrick and TaW regarding using MS Chart. Indeed it is a better and easier option as it is better programmed as my version so far. Though, i provided it of several series of data and i still suffer from performance issues. Namely, i have the following problems:

1. it takes around a minitue to draw the data
2. when zoomed-in (by enabling the corresponding properties, shown here and the hint found here), scrolling becomes slow. It would be great if it could kinda flow or so...
3. i am not able to or don't know how to zoom-out!

Referring to the comment of TaW (see below) regarding the missing information about what i mean with large data - The simulation data to be drawn represent a time period of hours (e.g. 2-3 hours) and the should be viewable in intervals of 60s.

My Main Problem is the performance of the chart!

Some diagnostic data that may help (used stopwatch to measure the DrawChart methode incl. its internal steps):

• chart1.Series.Clear() took: 00:00:00
• filling the chart1.Series.Add(...data..) took: 00:00:03.8230000
• configuring the chart1 took: 00:00:03.8240000
• plotView.DrawChart(points) took: 00:00:03.8290000

That tells me that the drawing in the chart-module is what takes so long...

Thanks for your help and time.

Answer 1

Displaying only the portion that is needed is certainly the option the takes least resources and time. Of course there is a break-even point somewhere up the size of the winodw of data points you display but I guess up to a couple of hundred points it will be the best solution...

You can try this:

DataPoint[] data60k1 = new DataPoint[60000];
int windowSize = 60;
HScrollBar scroller = new HScrollBar();

private void button14_Click(object sender, EventArgs e)
{
    // creating a few test data..
    for (int i = 0; i < data60k1.Length; i++) data60k1[i] = 
                                              new DataPoint(i, 3 + Math.Sin(i / 100f));

    // set up a HScrollBar:
    chart1.Controls.Add(scroller);
    scroller.Dock = DockStyle.Bottom;
    scroller.Maximum = data60k1.Length - windowSize;
    scroller.LargeChange = windowSize ;
    scroller.Scroll += scroller_Scroll;
    // show first portion..
    scroller_Scroll(null, null);
}

void scroller_Scroll(object sender, ScrollEventArgs e)
{
    chart1.Series[0].Points.Clear();
    for (int i = scroller.Value; i < scroller.Value + windowSize; i++) 
                 chart1.Series[0].Points.Add(data60k1[i]);
}

You can change the windowSize to control zooming in and out.. And you can set the SmallChange to some fraction of the windowSize.

Answer 2

Yes, you're missing an .net component which do as such, in winforms you could use the chart component you just have to set A Serie(you can select from a range of chart types including the point type which I think is the one you want) and them insert the DataPoints only once and have the .net deal with the work for you

Answer 3

I used a managed DirectX library to render like 100,000 points. Wasn't bad at all. Before doing that I was tried WPF which took a crazy amount of time. I used this library to be precise: http://www.codeproject.com/Articles/113991/Using-Direct-D-with-WPF

Answer 4

when adding x,y point to chart, You can Add every 10th point. instead of ALL 22.000 data in array.

       int TakeEveryNthPoint = 10;  
       double[] = new double[22000] {}; // your data

        for (int i = 0; i < data.Length; i++)
        {
            if (i % TakeEveryNthPoint != 0)
                continue;

            chart1.Series[0].Points.AddXY(i, data[i]);
        }

Alternatively:

if you dont need some vales that are below the threshold level or average you may simply not Add them .

but be sure that threadshold value eliminates lots of unnesesary values so you can see performance improvements

       double[] data = new double[22000] {}; // your data
       int thresholdValue= 10; 

       // get top 25%  of points
       int thresholdValueAuto= (data.Avg() + data.Max())/2; 

        for (int i = 0; i < data.Length; i++)
        {
            if (data[i] < thresholdValueAuto )
                continue;

            chart1.Series[0].Points.AddXY(i, data[i]);
        }