Pre loader

Is it possible to update XyDataSeries in a Web Workers thread?

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


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:

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?

  • You must 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

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.