This is a migrated thread and some comments may be shown as answers.

Data Virtualization (Stream data from file)

7 Answers 303 Views

ChartView

This is a migrated thread and some comments may be shown as answers.

BENN asked on 24 Apr 2018, 11:23 AM

I would like to create a graph view that shows a live data that is being received from a data sampler. This view, when running, shows, for example, the last 1000 samples.

When paused, it shows a scroll bar that allows the user to scroll back and forth and see all the sampled data.

I'm thinking of saving the data into file, so when the graph is paused, the data is read from the file using FileStream.

I saw the examples of VirtualQueryableCollectionView, but it still doesn't work.

I've tried with and without the VirtualQueryableCollectionView. I've created a collection that derives from IReadOnlyList<int> and I return 20,0000,000 as the count and I return the index as the item (this is just an example, for checking the data virtualization). However, the GetEnumerator (on both cases) is being called, and since the count is 20M, I yield return each of the items.

I was hoping that the VirtualQueryableCollectionView will somehow prevent the GetEnumerator call (or will be able to get just the relevant portion of the items).

I have seen examples where a similar tactics is being used, and a CollectionChanged event is being raised when the items are ready. However, they still return the full count, but on these examples, the GetEnumerator is called at start, and not also after the CollectionChanged event (on my code, it is called after the CollectionChanged, so I'm back to the same problem that I had), and no item is being returned using the GetEnumerator, but only with the Indexer.

What am I missing?

Can you show me an example of streaming data to chart view from a file?

(for example, have each 4 bytes in the file represent an Int32 which is the value, so the offset inside the file for a specific item will be the index * 4).

Thanks.

7 Answers, 1 is accepted

answered on 27 Apr 2018, 10:47 AM

Hello Ben,

We don't have such example, but I would recommend you to check the the Live Data demo that shows how to display update the chart's data at run-time.

Here is a possible approach that you can use to implement custom data virtualization for the chart.

Create a collection and bind it to the chart. This collection will contain only the items that will be display in the current viewport of the chart.
Read the file and get as much items as required to be shown in the viewport. For example, 20 items.
Start a DispatcherTimer and on each tick get items from the file load them in the chart, and then remove the old items that are no longer needed.

Note that the numeric axes as Linear and DateTimeContinuous allow you to set their range manually, so if you want to fake the chart so that it looks like it is populated with all the data, you can set the range and set the zoom level so that you can see only a portion of the data. On scrolling you can load and remove data from the visible range.

Please try this and if you have struggles with it let me know.

Regards,
Martin Ivanov
Progress Telerik

Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.

answered on 01 May 2018, 07:25 AM

Hi,

I've found this example that someone wrote:

https://www.telerik.com/forums/how-to-create-real-time-chart-(radcartesianchart-with-spline-series)-scrolled-or-panned-in-time

It has few bugs, but it looks like it can work. However, the example has 4 series (in my case, I can have up to 8), and when vieweing about 3000 or more points per series, the scroll is lagging.

using dotTrace, I have seen that most of the CPU time is wasted on the Add and Remove from the collection.

I was hoping that RadObservableCollection would help (because it has an AddRange and InsertRange), but I saw with dotTrace again that no performance was gained because a collection reset was called.

My data sampler, samples in a rate of 10 samples per second, which means that 3000 samples equals to 5 minutes in my X Axis time frame (Which is not so great).

What are my options for getting a better performance?

Thanks

answered on 07 May 2018, 03:19 AM

Yes,

In the MainVM, in AddItem, increase the count to 1000000, and do the same in the MainVM Ctor.

Run the example and use the PanZoomBar and drag the left side of it in order to zoom out (So more samples will appear in the view).

When you get to something like 2000 samples per series then you should see that:

1) The CPU usage is high, event when using Direct2D

2) When you drag the PanZoomBar from it's center (in order to scroll to a different view area)m then you should notice that the scroll is lagging and the CPU usage is high. (For that test, you can stop the timer, and then just scroll. The CPU usage goes for the Add and remove of the collection).

Assuming that I sample 10 samples per second, then 3000 samples are 5 minutes, which is not a large time interval.

Accepted

answered on 11 May 2018, 02:41 PM

Hello Benn,

Please excuse me for the delay. I tested the project with the mentioned settings and I can confirm that there is an increase in the CPU usage when you zoom out or pan the chart. This happens because the chart is redrawn and the amount of data in the viewport is pretty big. However, few seconds after the interaction with the chart is over, the CPU usage lowers noticeably. At this point what I could suggest you is to limit the viewport so that a smaller amount of data is shown. Also, if you open a new support ticket with an isolated version of your current implementation we will check it on our side and see if it is possible how to improve the performance.

Regards,
Martin Ivanov
Progress Telerik