However, some of our users require more than just a fast single chart. Here is a challenging requirement which was given to us by a customer of SciChart.js:
Customer A wanted a grid of up to 100 charts, each chart could have tens of thousands of datapoints. They needed to be interactive with synchronised x axes, which means that when any chart is zoomed/panned, every chart has to redraw. Text labels had to be visible for all charts and dynamically update as the chart is zoomed.
A dashboard with 100 charts look like this:
The stats / requirements are:
A major bottleneck we identified was the text rendering. With 1,000s of text labels on screen for this example the time just to draw the text was significant. To solve this, we implemented a novel native text rendering algorithm within our WebGL/WebAssembly graphics engine. This has been built into SciChart.js and includes full font support, including for shaped fonts like Arabic, Korean, Japanese and right to left text. This improved performance by a factor of 4 for the 100 chart dashboard scenario.
The next bottleneck is that by default, SciChart.js uses WebGL context sharing to get around the limit of 16 WebGL contexts per browser page. This has some extra overhead associated with drawing which is noticeable as the number of charts adds up. You can turn this off, opting for one WebGL context per chart (see documentation here), but then you’ll hit a hard limit of 16 charts on screen.
So, what if we combined the best of both worlds?
Our solution was to build an entirely new API called the SubCharts API which allows you to add multiple SciChartSurfaces to an existing chart surface. Our rendering engine then batches draw calls for all these charts into one. This technique doubled performance again, so we are now up to 8-10 times faster than before.
Below are the final results in table and chart form. With these enhancements, SciChart.js is able to render over 100 charts in a 10×10 dashboard, each with tens of thousands of data-points and refresh or update at 30 FPS. Even 192 charts is possible using these new techniques, allowing massive dashboards with hundreds of charts in a browser.
|# Charts||v2.x FPS||Native Text FPS||Subcharts FPS||Speed up (%)|
The SubCharts API which allows you to place charts in charts will be available as part of the SciChart.js v2.3 release, due later this year. This release will also include native text enhancements for better text label drawing performance and text labels on datapoints.
If you have a question about what SciChart’s WebGL / WebAssembly Charts can offer you, or if you would like to get a quote, please contact us. Our friendly, helpful team will be glad to help!