Remove WebGL Limitations & Optimize Rendering Speed With the Best JavaScript Dashboard Framework

At SciChart.js we’ve blogged several times on the speed and performance of our JavaScript Chart library. We previously showcased a chart drawing 10 million data-points in under 25 milliseconds and demonstrated how to load the entire history of Bitcoin in a 1-minute candlestick chart in JavaScript.

These unique performance capabilities make us a reliable choice for big-data dashboards. However, some of our users require more than just a fast single chart. In this blog, we’re outlining a more challenging requirement which was given to us by a customer.

We’re outlining how you can remove WebGL limitations and optimize rendering speed to achieve the best JavaScript dashboard framework for your big-data projects. This applies especially to projects where you want to add 100 charts or more.

Customer Requirement: Optimize a JavaScript Dashboard for Speed

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 JavaScript charts looks like this:

The stats and requirements are:

• 100 JavaScript charts in a single browser window
• Each chart with 60,000+ datapoints (total 6 million points)
• 200 axis each with 5 labels per axis
• Total of 1,000 text labels and 6 million datapoints
• This had to render at interactive speeds (30 FPS or better)

What Are the Challenges of Building JavaScript Multi-Chart Grids?

There are several considerations which affect the performance of a multi-chart grid. These include the number of data points to render (here the remedy is resampling), data fetching (is often a bottle neck if done not efficiently) and axis labels (a big number of axis labels slow down the performance). These are all challenges that can be overcome by using our performance optimization tips.

Our First Attempt at Optimizing JavaScript Dashboard Rendering

As always, we were up for the challenge of breaking though frequently encountered limitations when building JavaScript dashboards. Our first attempt at this used our built-in API to synchronise multiple JavaScript charts. This worked, but the performance wasn’t good enough. Only 1-2 FPS for 100 charts. We had to improve.

Is it Possible to Speed Up Text Rendering in JavaScript?

A major bottleneck we identified was the text rendering. With 1,000s of text labels on screen, the time just to draw the text was significant. To solve this, we implemented a native text rendering algorithm within our WebGL/WebAssembly graphics engine.

Built into SciChart.js, we include full font support, including shaped scripts, such as Arabic, Korean, Japanese and right to left text. By speeding up text rendering, we improved performance by a factor of 4 for the 100 chart dashboard scenario.

How to Render Multiple JavaScript Charts Without WebGL Limitations

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 creating a new SciChartSurface documentation), but then you’ll hit a hard limit of 16 charts on screen.

So, what if we combined the best of both worlds to break through WebGL limitations?

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.

The SubCharts API allows you to place charts in charts and includes native text enhancements for better text label drawing performance and text labels on datapoints.

Final Results: Fast Rendering for 100 JavaScript Chart Dashboards

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 JavaScript 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.

Speed improvements in SciChart.js for multi-chart scenarios (dashboards) using our new APIs!

Here are the performance results in chart form. You can see that with these improvements SciChart.js can greatly improve the overall responsiveness and interactivity of JavaScript dashboards with hundreds of charts and series.

Speed improvements in SciChart.js for multi-chart scenario using our new APIs

Does Library Choice Affect Chart Load Time?

Absolutely. Your choice of library affects chart load time. SciChart is built on the foundations of constantly upping our game in chart performance, making us one of the fastest JavaScript chart libraries.

This SubCharts API is just one of the many ways we ensure that big-data performs, even when you have 100s of series, achieving in excess of 10 million points. No freezing or lagging, just real-time precision at a rate of 60 FPS.

Which Browser is Best for Optimized JavaScript Dashboards?

The most popular browser (which SciChart is optimized for) is Chrome. There are some differences between browsers, for example Firefox performance for copying from WebGL canvas to 2D canvas is much slower than Chrome. This means that in some cases it might be worth using SciChartSurface.createSingle API.

H2: Build High Performance JavaScript Chart Dashboards with SciChart

SciChart provides high performance real–time chart components on the WPF (Windows), iOS, Android and JavaScript chart library platforms. Our software is used by companies that require the fastest possible 2D & 3D charts such as Formula One, research and scientific innovation, medical companies and more. So, when they ask us to push the boundaries of performance even further, we spare no expense.

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.

Start using SciChart.js Today

SciChart.js is now available with a FREE community edition (no trial, sign-up or credit card required) where you can try out the library commercially or use it in a non-commercial application. If you have a question, or would like to give feedback, contact us.

Contact UsGet Started With SciChart.js