I remember asking about something similar many years ago with WPF, but in browser the problem seems more apparent.
Using the current data model (I can be fairly flexible on the backend, and don’t necessarily have to do things this way), for some of the plots I generate many series that do some funky overlapping stuff (example attached). In the extreme examples, this can be thousands of series (the total number of data points might be < 100k).
In these cases, drawing basically grinds to a halt. Zooms take seconds, the OS starts complaining that chrome is locked up — you get the idea.
Is there a better way to approach this sort of plot? Are there any tuning recommendations for this scenario?
- Dan Santimore asked 5 months ago
Hi Dan, we can actually profile this by running code in Firefox Developer edition – which has a performance profiler similarly good to JetBrains dotTrace that we’re used to in .NET. However, to profile first we need a code sample to reproduce. If you can send something over in Codesandbox or Codepen, this would be very helpful. Find out how below: https://www.scichart.com/blog/codepen-codesandbox-and-jsfiddle-support-in-scichart-js. One of our performance demos which loads 500 series x 500 points (250k points total) can be found here https://demo.scichart.com/load-500-series-x-500-points-performance-demo. If you click on the ‘Edit in CodeSandbox’ button it will open in a new tab an editable code sample which runs in the browser. Start off with that. Thanks!
Thanks for the quick response! It took about 5 seconds in the code sandbox to try adding the rollover modifier and see an immediate drawing problem. Does that tally with expected performance issues? If there is not a way to improve the perf of that modifier (I can imagine that’s a tough one) I can always disable it when there are tons of series.- Sure thing — https://codesandbox.io/s/load-500-series-x-500-points-performance-demo-forked-2ynz4f?file=/src/App.tsx I’ve tweaked the constants to add additional series (1000) and reduce the data points to 100 each. I’ve also added a constant for the rollover modifier; so you can flip that on and off to see the difference in drawing. My memory is fuzzy, but I think we have solved this the same way (turning off the rollover) around 10 years ago in WPF :) Flags in my data set are sortedInX = true and containsNan = false
- Thanks Dan, gonna discuss this at tomorrows standup. Just a question – Rollover shows tooltips for ALL series at once. So if you have 1,000 that’s 1,000 SVG tooltips (equivalent to WPF UIElement). Is that the desired behaviour? Or do you want a single tooltip for the currently hovered or topmost series
- Good point, just the closest match/hovered series. In my actual code I have this in there: const rollover = new RolloverModifier({ showRolloverLine: false, hitTestRadius: 15, }); I just updated the sample with that. https://codesandbox.io/s/load-500-series-x-500-points-performance-demo-forked-2ynz4f?file=/src/App.tsx
- 1 more comment
- You must login to post comments
Hi
We’ve had a good look at this today and and found some decent improvements.
Firstly, RolloverModifier is really not designed for charts with very large numbers of series. CursorModifier is much closer to what you want, but even that will still report values for all the series in the hitTest radius. You can get it to return the nearest only with a fairly simple customization which I’ve demonstrated at https://codesandbox.io/s/load-500-series-x-500-points-performance-demo-forked-cny6pl
You would probably want to customize the tooltip content a bit. For documentation on that see https://www.scichart.com/documentation/js/current/webframe.html#CursorModifier_Formatting.html
In looking at this I’ve fixed a few issues with tooltip placement for both rollover and cursor, and found a fairly significant optimization that can be applied to hitTest when the data is sorted. These need a bit of testing so might be a few days before we can release.
We are planning a very significant rework of the tooltip functionality fairly soon, so details of real life requirements really helps us to refine the design of this.
Regards
David
- David Burleigh answered 5 months ago
These fixes are now released in v3.2.525 See full changelog at https://www.scichart.com/changelog/scichart-js/
- You must login to post comments
Please login first to submit.
