I have a real time updated chart with very large data size and I am facing the slow client problem. i.e. The data sending speed is faster than the data receiving and handling speed which causes memory growing up issue. I am trying to use Web Workers to increase the data handling speed in frontend. I have found a related post:
https://www.scichart.com/questions/wpf/is-xydataseries-safe-to-being-changed-in-a-separate-thread
It seems possible to update XyDataSeries in the background thread with WPF. My UI is built with NextJS. I tried to use Web Workers to implement multiple threads. But I found that it can’t pass the SciChartSurface or XyDataSeries to the worker thread. Could you show me an example on how to update XyDataSeries in the worker thread with Web Workers?
- Quyen Sy asked 1 year ago
- You must login to post comments
Hi Quyen
SciChart.js doesn’t contain thread safety and immutability like SciChart WPF does, so no, we do not recommend updating DataSeries in web workers. Besides, it’s difficult to share memory or objects across web workers. The object has to be serialized, and deserialized, so it’s doubtful this could result in a performance improvement.
However, you could review our Performance Tips page, which suggests to batch updates to the dataseries, as this is far faster than updating point by point. This might be a more suitable solution for you.
appendRange(), insertRange() and removeRange() are much more
performant than append(), insert() and remove(). This performance
difference is more noticeable with insert & remove.
// Test 1: Append 100k points one at a time
const series = new XyDataSeries(webAssemblyContext, { dataIsSortedInX: true, containsNaN: false });
const count = 100_000;
console.time("dataseries.append(x,y) 100k points");
for (let i = 0; i < count; i++) {
series.append(i, i);
}
console.timeEnd("dataseries.append(x,y) 100k points");
// Test 2: Append 100k points using AppendRange
const series2 = new XyDataSeries(webAssemblyContext, { dataIsSortedInX: true, containsNaN: false });
const xValues: number[] = Array.from(Array(count).keys());
const yValues: number[] = Array.from(Array(count).keys());
console.time("dataseries.appendRange(xValues,yValues) 100k points");
series.appendRange(xValues, yValues);
console.timeEnd("dataseries.appendRange(xValues,yValues) 100k points");
// Results
//
// Append(x,y) 100,000 times: 69ms
// AppendRange(xValues, yValues) with 100,000 points: 1ms
A concrete example of this can be found in our Streaming Websocket Demo example which batches updates to the chart for best performance.
Finally, SciChart.js v3.1.333 is in the pipeline, due to be released this week. This has big optimisations for dataSeries.append() update() and we recommend trying the latest version as well. Last we spoke you still had some blockers (regression issues) to updating. We’re these resolved for you?
Best regards
Andrew
- Andrew Burnett-Thompson answered 1 year ago
- last edited 1 year ago
-
Hi Andrew, I will try to update to v3.1.333 to see. All the v3 related issues I reported before should be fixed. I only have this issue now: https://www.scichart.com/questions/js/got-runtime-error-after-a-long-run-of-a-real-time-updated-chart The SciChart crashed sometimes without reason. I will try to see if this issue happens in v3.1.333.
- You must login to post comments
Please login first to submit.