v5.2.0

Author: Niilo Keinänen

README.md

@@ -1,7 +1,7 @@
-# JavaScript Heatmap Spectrogram Chart
-
-![JavaScript Heatmap Spectrogram Chart](spectrogram-darkGold.png)
-
+# JavaScript Heatmap Spectrogram Chart
+
+![JavaScript Heatmap Spectrogram Chart](spectrogram-darkGold.png)
+
 This demo application belongs to the set of examples for LightningChart JS, data visualization library for JavaScript.
 
 LightningChart JS is entirely GPU accelerated and performance optimized charting library for presenting massive amounts of data. It offers an easy way of creating sophisticated and interactive charts and adding them to your website or web application.
@@ -15,10 +15,10 @@ The demo can be used as an example or a seed project. Local execution requires t
           npm start                # builds an application and starts the development server
 
 -   The application is available at _http://localhost:8080_ in your browser, webpack-dev-server provides hot reload functionality.
-
-
-## Description
-
+
+
+## Description
+
 This example shows a simple use case for Heatmaps as a spectrogram.
 
 Spectrogram is a visual representation of the spectrum of frequencies. Spectrograms can be used to visualize any wave form. Most often spectrograms are used to display audio signals.
@@ -84,10 +84,10 @@ for (let row = 0; row < strideSize; row += 1) {
 [createchannelsplitter]: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createChannelSplitter
 [createsciptprocessor]: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createScriptProcessor
 [start-rendering]: https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/startRendering
-
-
-## API Links
-
+
+
+## API Links
+
 * [Heatmap Grid Series Intensity]
 * [Paletted Fill Style]
 * [LUT]
@@ -97,10 +97,10 @@ for (let row = 0; row < strideSize; row += 1) {
 * [Color factory HSV]
 * [Empty fill style]
 * [Empty line style]
-
-
-## Support
-
+
+
+## Support
+
 If you notice an error in the example code, please open an issue on [GitHub][0] repository of the entire example.
 
 Official [API documentation][1] can be found on [LightningChart][2] website.
@@ -116,17 +116,17 @@ Direct developer email support can be purchased through a [Support Plan][4] or b
 [2]: https://lightningchart.com
 [3]: https://stackoverflow.com/questions/tagged/lightningchart
 [4]: https://lightningchart.com/support-services/
-
+
 © LightningChart Ltd 2009-2022. All rights reserved.
-
-
-[Heatmap Grid Series Intensity]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/classes/HeatmapGridSeriesIntensityValues.html
-[Paletted Fill Style]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/classes/PalettedFill.html
-[LUT]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/classes/LUT.html
-[Dashboard]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/classes/Dashboard.html
-[Automatic axis scrolling options]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/variables/AxisScrollStrategies.html
-[Automatic axis tick placement options]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/variables/AxisTickStrategies.html
-[Color factory HSV]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/functions/ColorHSV.html
-[Empty fill style]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/variables/emptyFill-1.html
-[Empty line style]: https://lightningchart.com/js-charts/api-documentation/v5.1.0/variables/emptyLine.html
-
+
+
+[Heatmap Grid Series Intensity]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/HeatmapGridSeriesIntensityValues.html
+[Paletted Fill Style]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/PalettedFill.html
+[LUT]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/LUT.html
+[Dashboard]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/Dashboard.html
+[Automatic axis scrolling options]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/variables/AxisScrollStrategies.html
+[Automatic axis tick placement options]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/variables/AxisTickStrategies.html
+[Color factory HSV]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/functions/ColorHSV.html
+[Empty fill style]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/variables/emptyFill-1.html
+[Empty line style]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/variables/emptyLine.html
+

package.json

@@ -17,7 +17,7 @@
     "webpack-stream": "^7.0.0"
   },
   "dependencies": {
-    "@arction/lcjs": "^5.1.1",
+    "@arction/lcjs": "^5.2.0",
     "@arction/xydata": "^1.4.0"
   },
   "lightningChart": {

src/index.js

@@ -5,19 +5,7 @@
 const lcjs = require('@arction/lcjs')
 
 // Extract required parts from LightningChartJS.
-const {
-    lightningChart,
-    PalettedFill,
-    LUT,
-    emptyFill,
-    emptyLine,
-    AxisScrollStrategies,
-    AxisTickStrategies,
-    ColorHSV,
-    synchronizeAxisIntervals,
-    regularColorSteps,
-    Themes,
-} = lcjs
+const { lightningChart, PalettedFill, LUT, emptyLine, AxisScrollStrategies, AxisTickStrategies, regularColorSteps, Themes } = lcjs
 
 const AudioContext = window.AudioContext || window.webkitAudioContext
 // Create a new audio context,
@@ -182,7 +170,6 @@ const remapDataToTwoDimensionalMatrix = (data, strideSize, tickCount) => {
 
 /**
  * Create a chart for a channel
- * @param {lcjs.Dashboard}  dashboard       Dashboard to create the chart in
  * @param {number}          channelIndex    Current channel index
  * @param {number}          rows            Data row count
  * @param {number}          columns         Data column count
@@ -191,17 +178,7 @@ const remapDataToTwoDimensionalMatrix = (data, strideSize, tickCount) => {
  * @param {number}          minDecibels     dB amount that matches value 0 in data (Uint8).
  * @param {number}          maxDecibels     dB amount that matches value 255 in data (Uint8).
  */
-const createChannel = (dashboard, channelIndex, rows, columns, maxFreq, duration, minDecibels, maxDecibels) => {
-    // Create a new chart in a specified row
-    const chart = dashboard
-        .createChartXY({
-            columnIndex: 0,
-            columnSpan: 1,
-            rowIndex: channelIndex,
-            rowSpan: 1,
-        })
-        // Hide the chart title
-        .setTitleFillStyle(emptyFill)
+const createChannel = (chart, channelIndex, rows, columns, maxFreq, duration, minDecibels, maxDecibels) => {
     const theme = chart.getTheme()
 
     // Define function that maps Uint8 [0, 255] to Decibels.
@@ -218,9 +195,11 @@ const createChannel = (dashboard, channelIndex, rows, columns, maxFreq, duration
         // Use half of the fft data range
         y: Math.ceil(maxFreq / 2),
     }
+    const yAxis = chart.addAxisY({ iStack: 1 - channelIndex }).setMargins(channelIndex < 1 ? 15 : 0, channelIndex > 0 ? 15 : 0)
     // Create the series
     const series = chart
         .addHeatmapGridSeries({
+            yAxis,
             // Data columns, defines horizontal resolution
             columns: columns,
             // Use half of the fft data range
@@ -254,23 +233,14 @@ const createChannel = (dashboard, channelIndex, rows, columns, maxFreq, duration
         )
 
     // Set default X axis settings
-    series.axisX
-        .setInterval({ start: start.x, end: end.x, stopAxisAfter: false })
-        .setTickStrategy(AxisTickStrategies.Empty)
-        .setTitleMargin(0)
-        .setScrollStrategy(undefined)
-        .setMouseInteractions(false)
-    // Set default chart settings
-    chart.setPadding({ left: 0, top: 8, right: 8, bottom: 1 }).setMouseInteractions(false)
-    // Set default X axis settings
-    series.axisY
+    yAxis
         .setInterval({ start: start.y, end: end.y, stopAxisAfter: false })
         .setTitle(`Channel ${channelIndex + 1} (Hz)`)
         .setScrollStrategy(AxisScrollStrategies.fitting)
 
     return {
-        chart,
         series,
+        yAxis,
     }
 }
 
@@ -279,25 +249,22 @@ const createChannel = (dashboard, channelIndex, rows, columns, maxFreq, duration
  * @param {WaveFormData} data Data set to render
  */
 const renderSpectrogram = async (data) => {
-    // Create a dashboard with enough rows for the number of channels in data set
-    // NOTE: Using `Dashboard` is no longer recommended for new applications. Find latest recommendations here: https://lightningchart.com/js-charts/docs/basic-topics/grouping-charts/
-    const dashboard = lc
-        .Dashboard({
+    const chart = lc
+        .ChartXY({
             theme: Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined,
-            numberOfColumns: 1,
-            numberOfRows: data.channels.length,
         })
-        // Hide the dashboard splitter
-        .setSplitterStyle(emptyLine)
-
-    // Collection of created charts
-    const charts = []
-
+        .setTitle('Spectrogram chart 2 channels')
+    chart
+        .getDefaultAxisX()
+        .setTickStrategy(AxisTickStrategies.Numeric)
+        .setScrollStrategy(AxisScrollStrategies.fitting)
+        .setTitle(`Duration (s)`)
+    chart.getDefaultAxisY().dispose()
     // Create channels and set data for each channel
     for (let i = 0; i < data.channels.length; i += 1) {
         // Create a chart for the channel
         const ch = createChannel(
-            dashboard,
+            chart,
             i,
             data.stride,
             data.tickCount,
@@ -317,32 +284,17 @@ const renderSpectrogram = async (data) => {
             iColumn: 0,
             values: remappedData,
         })
-        // Add the created chart and series to collection
-        charts.push(ch)
     }
 
-    // Style to bottom most chart axis to use it as the common axis for each chart
-    charts[charts.length - 1].series.axisX
-        .setTickStrategy(AxisTickStrategies.Numeric)
-        .setScrollStrategy(AxisScrollStrategies.fitting)
-        .setTitle(`Duration (s)`)
-
     // Add LegendBox.
-    const legend = dashboard
+    const legend = chart
         .addLegendBox()
+        .add(chart)
         // Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
         .setAutoDispose({
             type: 'max-width',
             maxWidth: 0.3,
         })
-        .setPosition({ x: 100, y: 50 })
-        .setOrigin({ x: 1, y: 0 })
-    charts.forEach((c) => legend.add(c.chart))
-    // Link chart X axis scales
-    const syncedAxes = charts.map((chart) => chart.series.axisX)
-    synchronizeAxisIntervals(...syncedAxes)
-
-    return dashboard
 }
 
 ;(async () => {
@@ -360,7 +312,7 @@ const renderSpectrogram = async (data) => {
         // Process the loaded wave form to prepare it for being added to the chart
         const processed = await processWaveForm(waveform)
         // Create a dashboard from the processed waveform data
-        const dashboard = renderSpectrogram(processed)
+        renderSpectrogram(processed)
     }
     // Check if audio context was started
     if (audioCtx.state === 'suspended') {