JavaScript Audio Spectrogram 2D & 3D Chart - Editor

This example showcases the SurfaceScrollingGridSeries feature of LightningChart JS.

This works otherwise same as SurfaceGridSeries, except that it is designed explicitly for applications that are based on pushing new samples in, while shifting old samples out. For this reason, its data modification API is different.

SurfaceScrollingGridSeries is the 3D variant of HeatmapScrollingGridSeries. This is highlighted in this example, by displaying the same data in both 2D and 3D at the same time on top of another.

This example visualizes the frequency spectrum of a short audio clip (about 9 seconds long) of a truck driving. The visualization is done in real-time, simulating applications that measure, analyse and display audio metrics in real-time. One such application is the LightningChart Audio analysis showcase.

Each spectrogram in this application displays ~33 samples per second, each sample having 308 data points. With 4 spectrograms, this sums to about 10 000 data points per second.

About Performance

SurfaceScrollingGridSeries is one of the latest additions to LightningChart JS, and as such it enjoys from the very latest optimizations. Surface Grid Series is very well optimized for memory consumption and CPU usage.

Contrary to traditional data visualization tools, which perform a full update whenever data is changed, the scrolling grid series append operation is truly lightning fast due to it being designed specifically for this kind of applications. The data input rate of scrolling grid series is virtually unlimited, performing well with even tens of millions of incoming data points per second.

The performance bottleneck in scrolling spectrogram applications is generally axis ticks (surprisingly), and if the surface grid is large (several million data points and more) then the render time can start to limit the refresh rate. This is alleviated by using a better Graphics Processing Unit.

More Surface Examples

  • Static Surface Grid Chart | This example showcases the most simple usage of surface grid series, and also has a bit more detailed description of the related terms.

  • Chunked Surface Grid Chart | This example shows how surface grid series can be split into sub sections which are loaded individually for better performance and response time.

  • Intensity Surface Grid Chart | This example showcases how surface grid series can be colored based on a different data set than the height map used in this example.

  • All Surface Examples