Pre loader

JavaScript Heatmap Interactions Wave Simulation Demo

JavaScript Chart - Examples

SciChart.js ships with over 80 JavaScript Chart demos which you can browse, view the source code and see related documentation. Build incredible complex dashboards with SciChart.js, our High Performance JavaScript Chart Library.

Getting Started

This demo showcases a wave-simulation running entirely in browser and visualised by SciChart.js – JavaScript Charts.

Try clicking one of the presets on the top menu bar to see a double-slit experiment, a basic example or to show help/info.

What’s happening in this example/demo?

  • Top left: the wave simulation is running and output into a 2D heatmap or spectrogram chart.
  • Top right: displays a cross-section of the heatmap at the point where the cross-hairs are. These lines are rendered using our PaletteProvider API which allows per-point colouring and gradient line effect. Try dragging the cross-hairs to see the cross-section update.
  • Bottom left: The input parameters to the simulation. You can drag on the chart here to update the input parameters by editing chart series dynamically on the fly
  • Bottom right: point-outputs shows more outputs of the simulation updating in real-time.

This showcase demo makes use of many features of SciChart.js, including custom modifiers, PaletteProvider (gradient lines), editable annotations, custom behaviours to update the data on a chart and real-time updates.

HeatmapInteractions/drawExample.ts
View source code
HeatmapInteractions/AddIOModifier.ts
View source code
HeatmapInteractions/PointDragModifier.ts
View source code
HeatmapInteractions/DiscreteAxisMarker.ts
View source code
HeatmapInteractions/index.tsx
View source code
Back to JavaScript Chart Examples

JavaScript Chart Examples

2D Charts

Chart Legends

3D Charts
Featured Apps
What's New

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies