Update examples

Author: Niilo Keinänen

README.md

@@ -19,15 +19,11 @@ The demo can be used as an example or a seed project. Local execution requires t
 
 ## Description
 
-This example demonstrates **Scrolling Heatmap Aggregation** in `HeatmapScrollingGridSeries`. You can also configure aggregation for a static `HeatmapGridSeries`.
+This example demonstrates Scrolling Heatmap Aggregation in `HeatmapScrollingGridSeries`. You can also configure aggregation for a static `HeatmapGridSeries`.
 
-By default, heatmaps display the closest heatmap cell value to each pixel that is rendered on the screen. With dense, high resolution heatmaps, this can mean that there is no guarantee which data value is displayed in a pixel.
+By default, heatmaps display the closest heatmap cell value to each pixel that is rendered on the screen. With dense, high resolution heatmaps, this can mean that there is no guarantee which data value is displayed in a pixel. Heatmap aggregation can be enabled to specify this behavior (which value to show when multiple cell values are contained by single pixel) at the expense of a performance hit.
 
-Heatmap aggregation can be enabled to specify this behavior (which value to show when multiple cell values are contained by single pixel) at the expense of a performance hit.
-
-In this example, the lower heatmap uses the `max` aggregation mode, making sudden **power spikes (shown in red)** much easier to identify in the data stream.
-
-# Heatmap Scrolling Grid Series aggregation
+In this example, the lower heatmap uses the `max` aggregation mode, making it much easier to identify signals in the data stream.
 
 In LightningChart JS, aggregation mode is configured with the `setAggregation` method. By default the aggregation mode is `undefined`. Bilinear interpolation is not supported simultaneously, so remember to disable it with `setIntensityInterpolation('disabled')`. 
 
@@ -39,8 +35,6 @@ heatmapSeries
     .setIntensityInterpolation('disabled')
 ```
 
-The data used in this example: [ElectroSense PSD Spectrum Dataset](https://doi.org/10.5281/zenodo.7521246).
-
 ## API Links
 
 * [Scrolling Heatmap Grid Series]
@@ -69,13 +63,13 @@ Direct developer email support can be purchased through a [Support Plan][4] or b
 [3]: https://stackoverflow.com/questions/tagged/lightningchart
 [4]: https://lightningchart.com/support-services/
 
-© LightningChart Ltd 2009-2025. All rights reserved.
+© LightningChart Ltd 2009-2026. All rights reserved.
 
 
-[Scrolling Heatmap Grid Series]: https://lightningchart.com/js-charts/api-documentation/v8.1.0/classes/HeatmapScrollingGridSeriesIntensityValues.html
-[Paletted Fill Style]: https://lightningchart.com/js-charts/api-documentation/v8.1.0/classes/PalettedFill.html
-[Color Lookup Table]: https://lightningchart.com/js-charts/api-documentation/v8.1.0/classes/LUT.html
-[Chart XY]: https://lightningchart.com/js-charts/api-documentation/v8.1.0/classes/ChartXY.html
-[Axis XY]: https://lightningchart.com/js-charts/api-documentation/v8.1.0/classes/Axis.html
-[Axis Automatic Scroll Strategies]: https://lightningchart.com/js-charts/api-documentation/v8.1.0/variables/AxisScrollStrategies.html
+[Scrolling Heatmap Grid Series]: https://lightningchart.com/js-charts/api-documentation/v8.2.0/classes/HeatmapScrollingGridSeriesIntensityValues.html
+[Paletted Fill Style]: https://lightningchart.com/js-charts/api-documentation/v8.2.0/classes/PalettedFill.html
+[Color Lookup Table]: https://lightningchart.com/js-charts/api-documentation/v8.2.0/classes/LUT.html
+[Chart XY]: https://lightningchart.com/js-charts/api-documentation/v8.2.0/classes/ChartXY.html
+[Axis XY]: https://lightningchart.com/js-charts/api-documentation/v8.2.0/classes/Axis.html
+[Axis Automatic Scroll Strategies]: https://lightningchart.com/js-charts/api-documentation/v8.2.0/variables/AxisScrollStrategies.html
 

assets/spectrum.json

@@ -9,19 +9,19 @@ const {
     emptyLine,
     synchronizeAxisIntervals,
     AxisTickStrategies,
-    htmlTextRenderer,
 } = lcjs
 
 // General configuration for this data set
 const config = {
     framesPerSecond: 20,
     frameIntervalMs: (0.5 * 1000) / 20,
-    freqStartMHz: 920,
-    freqEndMHz: 935,
-    resolution: 1612,
-    freqStepMHz: (935 - 920) / (1612 - 1),
-    visibleFrameCount: 150,
+    freqStartMHz: 0,      
+    freqEndMHz: 400,
+    resolution: 1612,       
+    freqStepMHz: (400 - 0) / (1612 - 1),
+    visibleFrameCount: 400,
 }
+const charts = []
 
 // Initialize LightningChart JS
 const lc = lightningChart({
@@ -45,24 +45,43 @@ const chart1 = lc
         container: containerChart1,
         defaultAxisX: { type: 'linear-highPrecision' },
         defaultAxisY: { type: 'linear-highPrecision' },
-        textRenderer: htmlTextRenderer,
-        theme: Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined,
+        theme: (() => {
+    const t = Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined
+    const smallView = Math.min(window.innerWidth, window.innerHeight) < 500
+    if (!window.__lcjsDebugOverlay) {
+        window.__lcjsDebugOverlay = document.createElement('div')
+        window.__lcjsDebugOverlay.style.cssText = 'position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);color:#fff;padding:4px 8px;z-index:99999;font:12px monospace;pointer-events:none'
+        if (document.body) document.body.appendChild(window.__lcjsDebugOverlay)
+        setInterval(() => {
+            if (!window.__lcjsDebugOverlay.parentNode && document.body) document.body.appendChild(window.__lcjsDebugOverlay)
+            window.__lcjsDebugOverlay.textContent = window.innerWidth + 'x' + window.innerHeight + ' dpr=' + window.devicePixelRatio + ' small=' + (Math.min(window.innerWidth, window.innerHeight) < 500)
+        }, 500)
+    }
+    return t && smallView ? lcjs.scaleTheme(t, 0.5) : t
+})(),
     })
     .setTitle('Scrolling Heatmap - No Aggregation')
     .setTitleMargin({ top: 10, bottom: 10 })
+    .setCursorMode(undefined)
 containerChart1.style.flex = '1'
 
 // Setup progressive scrolling Axis
 chart1.axisY
     .setScrollStrategy(AxisScrollStrategies.scrolling)
-    .setTitle('History (Frames)')
+    .setTitle('Time (s)')
     .setDefaultInterval((state) => ({
         start: state.dataMax ?? 0,
         end: (state.dataMax ?? 0) - config.visibleFrameCount,
         stopAxisAfter: false,
     }))
     .setPointerEvents(false)
-    .setTickStrategy(AxisTickStrategies.Empty)
+    // .setTickStrategy(AxisTickStrategies.Empty)
+    .setTickStrategy(AxisTickStrategies.Numeric, (tickStrategy) => tickStrategy
+        .setFormattingFunction((frameIndex) => {
+            const seconds = frameIndex / config.framesPerSecond
+            return seconds.toFixed(1) 
+        })
+    )
     .setAnimationsEnabled(false)
 
 chart1.axisX
@@ -98,24 +117,29 @@ const chart2 = lc
         container: containerChart2,
         defaultAxisX: { type: 'linear-highPrecision' },
         defaultAxisY: { type: 'linear-highPrecision' },
-        textRenderer: htmlTextRenderer,
         // theme: Themes.darkGold
     })
     .setTitle('Scrolling Heatmap - Aggregation (Max)')
     .setTitleMargin({ top: 10, bottom: 10 })
+    .setCursorMode(undefined)
 containerChart2.style.flex = '1'
 
 // Setup progressive scrolling Axis
 chart2.axisY
     .setScrollStrategy(AxisScrollStrategies.scrolling)
-    .setTitle('History (Frames)')
+    .setTitle('Time (s)')
     .setDefaultInterval((state) => ({
         start: state.dataMax ?? 0,
         end: (state.dataMax ?? 0) - config.visibleFrameCount,
         stopAxisAfter: false,
     }))
     .setPointerEvents(false)
-    .setTickStrategy(AxisTickStrategies.Empty)
+    .setTickStrategy(AxisTickStrategies.Numeric, (tickStrategy) => tickStrategy
+        .setFormattingFunction((frameIndex) => {
+            const seconds = frameIndex / config.framesPerSecond
+            return seconds.toFixed(1) 
+        })
+    )
     .setAnimationsEnabled(false)
 
 chart2.axisX
@@ -146,8 +170,59 @@ const heatmapSeries2 = chart2
 synchronizeAxisIntervals(chart1.axisX, chart2.axisX)
 synchronizeAxisIntervals(chart1.axisY, chart2.axisY)
 
+// Add manual cursors to charts
+const cursor1 = chart1.addCursor()
+const cursor2 = chart2.addCursor()
+charts.push({ chart: chart1, series: heatmapSeries1, cursor: cursor1 })
+charts.push({ chart: chart2, series: heatmapSeries2, cursor: cursor2 })
+
+const hideCursor = () => {
+    charts.forEach((chart) => chart.cursor.setVisible(false))
+}
+
+// Display cursor at given x coordinate and solve nearest for all series in both charts
+const displayCursorAt = (x, y, value) => {
+    charts.forEach((chart) => {
+        const solveResults = chart.chart
+        .getSeries()    
+        // NOTE: Heatmap series doesn't currently have direct API syntax to solve nearest from axis coordinate - for it, you have to first translate axis coordinate to client coordinate and then use solve nearest
+        .map((series) => series.getCursorEnabled() && series.solveNearest({ x, y: 0 }))
+        .filter((solve) => !!solve)
+        if (solveResults.length > 0) {
+            solveResults[0].x = x
+            solveResults[0].y = y
+            solveResults[0].cursorPosition.pointMarker.x = x
+            solveResults[0].cursorPosition.pointMarker.y = y
+            solveResults[0].intensity = value
+            chart.cursor
+            .setVisible(true)
+            .setPosition({
+                pointMarker: { x: x, y: y },
+                pointMarkerScale: chart1.coordsAxis,
+                resultTable: { x: x, y: y },
+                resultTableScale: chart1.coordsAxis,
+            })
+            .setResultTable((rt) => rt.setContent(chart1.getCursorFormatting()(chart1, solveResults[0], solveResults)))
+        } else {
+            chart.cursor.setVisible(false)
+        }
+    })
+
+}
+
+charts.forEach((chart) => {
+    chart.series.addEventListener('pointermove', (event, info) => {
+        let intensity = 0        
+        if (info) {
+            try { intensity = info.intensity } catch (error) { intensity = 0} 
+        }
+        displayCursorAt(chart.chart.translateCoordinate(event, chart.chart.coordsAxis).x, chart.chart.translateCoordinate(event, chart.chart.coordsAxis).y, intensity)
+    })
+    chart.series.addEventListener('pointerleave', (event) => hideCursor())
+})
+
 const streamData = () => {
-    fetch(document.head.baseURI + 'examples/assets/1708/spectrum_920_935.json')
+    fetch(document.head.baseURI + 'examples/assets/1708/spectrum.json')
         .then((r) => r.json())
         .then((data) => {
             // Find min and max values of data for LUT
@@ -161,13 +236,10 @@ const streamData = () => {
                 }
             }
 
-            const A = Math.floor(min)
-            const B = Math.ceil(max)
-
             const lut = new LUT({
-                steps: regularColorSteps(A, B, theme.examples.coldHotColorPalette),
-                units: 'dBm',
                 interpolate: true,
+                steps: regularColorSteps(Math.floor(min), Math.ceil(max), theme.examples.coldHotColorPalette),
+                units: 'dBm',
             })
             const paletteFill = new PalettedFill({ lut, lookUpProperty: 'value' })
             heatmapSeries1.setFillStyle(paletteFill)
@@ -176,10 +248,7 @@ const streamData = () => {
             let frameIndex = 0
 
             const interval = setInterval(() => {
-                if (frameIndex >= data.length) {
-                    // Loop the data set
-                    frameIndex = 0
-                }
+                if (frameIndex >= data.length) frameIndex = 0
 
                 const sample = data[frameIndex]
                 heatmapSeries1.addIntensityValues([sample])
@@ -193,4 +262,4 @@ const streamData = () => {
         })
 }
 
-streamData()
+streamData()