Create a vibration charts application with 2D & 3D spectrograms

Hello, in this article we will create a JS dashboard with 2D and 3D spectrogram charts.

The purpose of creating this project is to explain how to create a vibration analysis application that allows us to check sound waves using 2D and 3D spectrogram charts that LightningCharts JS provides us with its lcjs library.

Vibration analysis is of great importance in detecting errors and/or faults in industrial equipment (just to mention one example).

I once worked in the industry and I remember that it was possible to detect failures in relief valves, air coolers, and compression elements, simply by listening to the intensity of the sound they generated.

With the chart that we are going to build next, we will see an audio file corresponding to a similar case.

I recommend looking at the following LightningCharts articles, where you can see more information and an excellent use case:

Given the brief introduction, take a look at what you'll create today:

HubSpot Video


Table of Contents


In the previous article (Creating a pie chart with LightningChart JS and NodeJS), we created a pie chart from scratch using Typescript, Node JS y LightningCharts JS.

For this article, we will use the same project, so I recommend you to download the template from that article or jump straight and get this project's template. Using Visual Studio Code, 

  1. Create the file [dashboard.ts]
  2. Add the file [audio2ch.json]
  3. Creating-dashboard.ts-file-for-2D-3D-spectrogram-charts-projectOpen a new terminal and execute the command [npm install]


Once the above is done, the libraries we need to compile our project will be installed.

Inside these libraries, there will be a @arction/lcjs library, which contains classes that will help us build our chart.

Back to contents



We will start with our [dashboard.ts] file.

  1. Import the JSON file, which will contain two-byte arrays. One is channel 1 and the other is the channel 2. Now, add the necessary classes inside a constant to be able to use them more easily.

  2. Create the following constants:

    Creating historyMS, SampleRateHZ, and SampleIntervalMS constants
    • [historyMS] = will affect the speed (Milliseconds) in which the sound wave will be analyzed (the lower the value, the higher the speed).
    • [sampleRateHZ] = Samples per second.
    • [sampleIntervalMS] = Affects the frames per second in which the audio waveform is displayed on the chart.
  3. Create the dashboard on which the spectrogram charts for vibration analysis will be displayed:


    Our dashboard will have two columns and two rows. Now assign the theme of your liking and the height of the rows. Note: To see more themes, check the Themes Documentation.

  4. Create the color palette for the audio wave:

    The LUTSteps collection specifies colors and their corresponding values to describe the location and color of a transition point in a gradient. Each represented as an even object {value: number, color: Color}. 
  5. Create a list of channels
    In our JSON file, we have two-array bytes, each one corresponds to a channel, therefore, we will create two lists with their properties.

    name: Name of the channel. This property can be used as the title of the chart.
    data: Assigns the byte array that we want to assign to each channel.
    columnIndex: Specifies the column within the dashboard, where our chart will be placed.

Back to contents



The code explained below will be executed inside a .map function, which means that the objects in the dashboard will be created according to the number of channels that exist in our [channelList] object.



getDefaultAxisX = Get a reference to the default X-Axis of the ChartXY.

This will always return a reference to the X-Axis that is closest to the chart (starting from the bottom). All methods below [getDefaultAxisX] will affect only the X-axis. (Same logic in case you need to reference to Y-axis [getDefaultAxisY]).  Read more about the getDefaultAxisX and  getDefaultAxisY

setTickStrategy = It shows the time values of our sound wave in milliseconds. Read more about AxisTickStrategies

 setScrollStrategy = Assigns a scrolling behavior on the specified axis. Read more about setScrollStrategy

setInterval = Sets the axis scale interval. Parameters may change depending on the chart type.

In this case, the start scale value is obtained from the [historyMs] constant. 0 is equal to the end value of the scale. Read more about setInterval

setTitle = Title displayed on the specified axis.

These same properties will be applied to the 3D chart:



We will assign the type of chart that we need for the representation of the audio wave, in this case, we'll be using a 2D and 3D spectrogram, This visualization is done in real-time and simulates audio metrics for vibration analysis applications that measure, analyze, and display them in real-time:



For our 2D chart, we will use the [addHeatmapScrollingGridSeries] class. Learn more about this property in the LightningChart JS documentation 

This class will allow us to use the HeatmapGrid chart to represent our audio waveform.

For our 3D chart, we will use the [addSurfaceScrollingGridSeries] class. Learn more about this property.

Back to contents




The [setInterval] function Configures infinite streaming from a set of static data.

It makes use of the [bufferIncomingSamples] function, which is responsible for guaranteeing a static sampling rate, even if the input data may vary. This is done by skipping samples that are too frequent and duplicating samples that are too far apart.

The precision can be set simply by changing the value of [sampleRateHz].






Spectrograms are only one example of charts that you can use to monitor and visualize vibration data. Other vibration charts include multi-channel data monitoring chart, audio visualization, or the spectrogram XY projection chart

In the process of vibration analysis, vibration charts display the data collected through several sensors connected to the machinery. Those sensors, which can include triaxial accelerometers, log the data that later in the analysis process, will help detect anomalies in the machines' structure and functionality.

The ultimate goal of visualizing vibration data is to assure that industrial machinery data is being constantly monitored, helps detect functionality problems, and helps apply preventive and corrective maintenance. 

LightningChart JS supports the development of vibration analysis applications by delivering the highest-performance vibration charts that can process billions of data points in real-time thanks to advance WebGL rendering and GPU acceleration technologies.




Here is a link to the zip project that you can use to generate your own vibration analysis application with LightningChart JS 2D and 3D spectrogram charts.

Download project



What are vibration charts?

Vibration charts are used to visualize vibration data from machinery logged via different types of sensors. These data are processed in real-time and help engineers to identify structural problems and weaknesses in machinery. Learn more about vibration analysis.

What is LightningChart JS?

LightningChart JS is an advanced data visualization library that can be easily integrated into web, mobile, and desktop applications that need to render millions or billions of data points at the highest performance.

What other charts can I create with LightningChart JS?

There are more than 100 chart types that can be created with LightningChart JS, including 2D and 3D, you can visit our interactive examples to see more.

Is LightningChart JS free?

LightnignChart JS offers both non-commercial and commercial licenses. If you want to use the library for free for non-commercial purposes, get the Community license.


LightningChart® Data Visualization Library for Desktop, Web & Mobile Application Development


LightningChart® Data Visualization Solutions are advanced data visualization libraries for .NET and JavaScript featuring 200+ charts that can be easily integrated into cross-platform applications that demand high-performance charts with fast rendering and large dataset processing of several billions of data points.