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.- Hi Dan, that’s one of the beauties of JavaScript – we can share solutions and edit code with a link! Are you seeing the same thing in your own application? Without the rollover, it’s okay, but with the rollover it’s slow? The rollover has to perform hit test on all the series. Give us a numbers (how many series, how many points, is the data sorted or unsorted in X) we can play around with it and see if we can reproduce and improve this.
- 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
Comments for "Tuning/Performance implications with many series"
Queens Award for Innovation
Proud winners of the Queens Award for Innovation, 2019. Awarded on account of our innovative graphics engine which underpins the SciChart library and enables our world-beating charting performance
National Business Awards
Highly Commended for Lloyds National Business Awards, 2019. Awarded on account of our innovative graphics engine and impressive customer base
Reviews
SciChart has received hundreds of verified, 3rd party reviews