Line Chart with scrollbar

[ejleiss]

Hello,

I have a line chart that is plotting data that is streaming in via a serial port. When the data is finished streaming, (port closed) I would like to be able to scroll through the collected data that was plotted. Would anyone have any ideas of where to start with this?

 

[IanRyder]

Hi,

I have not actually written this as an example but from a principal point of view you could do the following:-

1) Add a HScrollBar below your chart and set it's minimum value to 0.

2) When you receive inputs from your serial port you need to save this data in some form of container. Let's set a List(Of Integers), for arguments sake. Lets call this list "myDataReceivedList".

3) Each time you receive data from your serial port, add it to the above list then set the HScrollBar.Maximum property of the HScrollBar to the myDataReceivedList.Count-1. Also set the HScrollBar.Value property to the HScrollBar.Maximum value so that the HScrollBar moves to the right knowing that additional information has been received.

4) The reason for doing the above in point 3 is that the scroll bar is then directly related to the index of the information which is then stored in the list.

5) When you then need to scroll through your chart you can then use the Scroll event of the HScrollBar to test the value of HScrollBar1.Value. This value will then give you the value of the List Index where the scroll bar now resides.

6) From this HScrollBar1.Value you can then create your own for loops to determine the upper and lower bounds of the data to be displayed from the myDataReceivedList list based on the number of indices that your chat requires you to display.

I hope this makes sense and gives you a good start.

If you are still struggling (and I mean desperately) then I can easily come up with an example using a timer to simulate your serial port data being received if you need.

Cheers,

Ian

 

[ejleiss]

Thanks for the reply.. I put the received serial data in an array called "ReceivedList", I set the HScrollBar minimum to 0 and the maximum to ReceivedList.Count-1, and set the HScrollBar1.Value = ReceivedList(i). However, I don't know in the HScrollBar1_Scroll event, how do I recall these points to be displayed on the chart? Any idea?

 

[IanRyder]

Hi,

A couple of things to mention for you here:-

1) Do not forget that the post I made was based on a theoretical principal since as I mentioned at the time I had not actually written this at the time of posting. I wrote an example yesterday to make sure I could back up my post and my theory is about 90% accurate. Therefore as for all posts you should take the information given and make sure you adapt them to accommodate your own needs.

As to your questions:-
1) The first thing that you need to do is define a constant in your code which holds the number of DataPoints on the X axis that will be displayed at any one time. For this example lets say that's 10 DataPoints and the constant is called MaxPointsToDisplay.

2) The next thing to realise is that the HScroll Bar only becomes necessary when the number of inputs from the serial port becomes greater that the number of DataPoints that can be displayed on the X axis at any one time. Therefore you only need to start setting values for the HScroll Bar at that point in time.

3) Once the number of Inputs received becomes greater than the number of DataPoints then you can set the HSrollBar1.Maximum and HSrollBar1.Value to your array properties being ReceivedList.Count - MaxPointsToDisplay. By doing it this way what happens is that the HSrcollBar1.Value equals the index in the ReceviedList array which defines the start DataPoint of the graph to display when you then actually scroll your HScroll Bar.

Also notice that I am setting the HScrollBar1.Value to a numeric index which matches a point in your ReceivedList array. What you have done in your example is assigned an ELEMENT of your ReceivedList array to the HScrollBar1.Value property using ReceivedList(i), which is incorrect.

4) One additional thing that I found was that I not only had to save the information from the Input but I also had to save the information for the AxisLabel displayed on the X Axis. I did this by storing my data in a List(Of System.Windows.Forms.DataVisualization.Charting.DataPoint).

5) Once all that is done you can now code the HScrollBar1_Scroll event using a For Loop. See the example below:-

Chart1.Series(0).Points.Clear()
 
For Counter As Integer = HScrollBar1.Value To HScrollBar1.Value + (MaxPointsToDisplay - 1)
  Chart1.Series(0).Points.Add(ReceivedList(Counter))
Next

You can see that we use the Value of the HScrollBar as the starting point, then we work out the maximum index in the ReceivedList Array which represents the total number of DataPoints to display on the chart, then we plot the points on a clean chart.

That should be it, so good luck.

Cheers,

Ian

 

[ejleiss]

Got it working with all your help! Thank you very much, you have a great way of giving examples and explaining things, I appreciate it.

 

[IanRyder]

Hi,

You are welcome and great to hear you got it working.

Cheers,

Ian