javascriptlightningchart

LightningChart crashes when I draw a spectrogram using HeatmapGridSeries

While looking for a way to draw spectrograms in a web browser, I came across LightningChart.

enter image description here

I'd like to draw something similar to the one above using the community version of LightningChart.

Referring to LightningChart's API documentation and examples, I wrote the sample code like below.

// Create a XY Chart.
const chart = lightningChart()
  .ChartXY({
    container: "target",
  })
  .setTitle("LightningChart Spectrogram Test #1");

// Set the tick strategy for the x-axis to DateTimeTickStrategy
chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime);

// Prepare sample data
const COLUMNS = 100;
const ROWS = 10;
const MAX_INTENSITY_VALUE = 360
const sampleData = Array.from({ length: ROWS }, () =>
  Array.from({ length: COLUMNS }, () => parseInt(Math.random() * MAX_INTENSITY_VALUE))
);

const start = { x: 0, y: 0.1 };
const step = { x: 2000, y: 0.39 };

// Create a series
const series = chart
  .addHeatmapGridSeries({
    columns: COLUMNS,
    rows: ROWS,
    start,
    step,
    dataOrder: "rows",
    heatmapDataType: "intensity",
  })
  // .setIntensityInterpolation("disabled")
  .setFillStyle(
    new PalettedFill({
      lookUpProperty: "value",
      lut: new LUT({
        steps: regularColorSteps(
          0,
          MAX_INTENSITY_VALUE,
          chart.getTheme().examples.spectrogramColorPalette
        ),
        interpolate: false,
      }),
    })
  )
  .setWireframeStyle(emptyLine);

series.invalidateIntensityValues(sampleData);

The above code works fine, but it's a little different from what I want.

When we call series.setIntensityInterpolation("disabled")(which is currently commented out) to get the desired result, nothing is plotted and the console displays as shown below. enter image description here

I'm using LightningChart JS v4.1.0 and test on Chrome browser.

This is a crashing single HTML file I'm working on. (I wrote this code based on https://github.com/Arction/lcjs-html-example)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Using chart in HTML page</title>
    <meta charset="utf-8" />
    <!-- Automatically support high DPI devices -->
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <!-- Flexbox styling to have the chart and header fill the page.
        Chart will take as much space as possible. -->
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      .box {
        display: flex;
        flex-flow: column;
        height: 100%;
      }

      .box .row.header {
        flex: 0 1 auto;
      }

      .box .row.content {
        flex: 1 1 auto;
      }
    </style>
  </head>

  <body class="box">
    <h1 class="row header">LightningChart Spectrogram Test #1</h1>

    <!-- Create div to render the chart into-->
    <div id="target" class="row content"></div>

    <!--IIFE assembly (lcjs.iife.js) is a standalone JS file, 
      which does not need any build tools, 
      such as NPM, to be installed-->
    <!--Script source must be defined in it's own script tag-->
    <script src="lcjs.iife.js"></script>

    <!--Actual chart related script tag-->
    <script>
      // Replace the contents of this script tag if you want to test code from our examples:
      // https://www.arction.com/lightningchart-js-interactive-examples/

      // Extract required parts from LightningChartJS.
      const {
        AxisTickStrategies,
        LUT,
        PalettedFill,
        Themes,
        emptyLine,
        lightningChart,
        regularColorSteps,
      } = lcjs; //Note: @arction/lcjs is not needed here, when using IIFE assembly

      // Create a XY Chart.
      const chart = lightningChart()
        .ChartXY({
          // Set the chart into a div with id, 'target'.
          // Chart's size will automatically adjust to div's size.
          container: "target",
        })
        .setTitle("LightningChart Spectrogram Test #1"); // Set chart title

      // Set the tick strategy for the x-axis to DateTimeTickStrategy
      chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime);

      // Prepare sample data
      const COLUMNS = 100;
      const ROWS = 10;
      const MAX_INTENSITY_VALUE = 360;
      const sampleData = Array.from({ length: ROWS }, () =>
        Array.from({ length: COLUMNS }, () =>
          parseInt(Math.random() * MAX_INTENSITY_VALUE)
        )
      );

      const start = { x: 0, y: 0.1 };
      const step = { x: 2000, y: 0.39 };

      // Create a series
      const series = chart
        .addHeatmapGridSeries({
          columns: COLUMNS,
          rows: ROWS,
          start,
          step,
          dataOrder: "rows",
          heatmapDataType: "intensity",
        })
        .setIntensityInterpolation("disabled")
        .setFillStyle(
          new PalettedFill({
            lookUpProperty: "value",
            lut: new LUT({
              steps: regularColorSteps(
                0,
                MAX_INTENSITY_VALUE,
                chart.getTheme().examples.spectrogramColorPalette
              ),
              interpolate: false,
            }),
          })
        )
        .setWireframeStyle(emptyLine);

      series.invalidateIntensityValues(sampleData);
    </script>
  </body>
</html>
Solution

  • Not sure what's wrong here, code looks OK, and I tested it locally and works with both intensity interpolation disabled and enabled.

    I used LCJS build from https://cdn.jsdelivr.net/npm/@arction/lcjs@4.1.2/dist/lcjs.iife.js

    Otherwise no edits to the code you have in the question.

    enter image description here