Pre loader

Multiple synchronised charts are laggy

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

Answered
0
0

Hi,

I’ve been following your instructions on linking multiple charts here: https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2009%20-%20Linking%20Multiple%20Charts.html

I have found that one chart in isolation runs at the full 60fps smoothness, but with each chart that is synchronised, it gets progressively slower until 5+ synced charts, at which point it becomes almost unusable. This is definitely an issue for our use-case, which will require a large number of synchronised charts.

This is currently using uniform heatmap charts only, I haven’t tried it with any others.

The issue occurs with and without data, i.e. a completely empty heatmap.

I also found that if I follow the instructions to the letter (i.e. a full two-directional link, with one chart pushing position changes to the other, and vice-versa), I get “Maximum depth exceeded” errors due to the infinite loop.

Am I doing something wrong? Are you able to recreate this issue?

Thanks
Joe

Version
1.1.1368
  • You must to post comments
Best Answer
1
0

Hi Joe,

Thank you for posting the question. Often the problem is caused by multiple subscriptions.

In order to fix such a problem you should either call

someXAxis.visibleRangeChanged.unsubscribe(updateVisibleRangeFunction)

where updateVisibleRangeFunction is the reference to the same function that the axis was subscribed, or you should just await until all the charts are initialized and only after that to subscribe.

await Promise.all([
  createChart("scichart-target-1"),
  createChart("scichart-target-2")
]);
chartXAxes.forEach((xAxis) => {
  xAxis.visibleRangeChanged.subscribe(updateVisibleRangeFunction);
});

Moreover when synchronising visible range for multiple charts it is important to pass the same NumberRange object to prevent infinite re-rendering. In the library we compare visibleRange objects, if objects are the same re-rendering does not happen.

Example with React:

useEffect(() => {
    const subscription = (sourceIndex: number) => (newRangeEvent) => {
      if (newRangeEvent) {
        const newRange = newRangeEvent.visibleRange;

        chartXAxes.forEach((destinationXAxis, destinationIndex) => {
          if (sourceIndex !== destinationIndex) {
            destinationXAxis.visibleRange = newRange;
          }
        });
      }
    };

    chartXAxes.forEach((sourceXAxis, sourceIndex) => {
      sourceXAxis.visibleRangeChanged.subscribe(subscription(sourceIndex));
    });
  }, [isLoaded]);

Best regards,
Michael Klishevich.

  • You must to post comments
0
0

Hi Joe,

Maybe there’s a bit of recursion occurring here with the updates of one chart forcing another to redraw and so on.

Can you send us an npm project to reproduce? Email it to support [at] scichart [dot] com. We will take a look see if we can optimise.

Also would be good to know which browser you’re using (browser does matter).

Best regards,
Andrew

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies