SciChart: Working with Zooming module is not working

I am using SciChart Library for showing Graphs.

I want to know, how can I use MouseWheelZoomModifier module of SciChart library in my pure HTML & CSS based website.

I know there is a documentation available related to React but I am not using it in my Website.

I have written the following Code:

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Include SciChart.js -->
    <script
      src="https://cdn.jsdelivr.net/npm/scichart@2.1.2290/_wasm/scichart.browser.js"
      crossorigin="anonymous"
    ></script>
    <title>Hello, SciChart.js world!</title>
  </head>
  <body>
    <h1>Hello, SciChart.js world!</h1>
    <!-- Create the Div to host the SciChartSurface -->
    <div id="scichart-root" style="width: 800px; height: 600px;"></div>
    <!-- The JavaScript to create a SciChartSurface -->
    <script>
      async function initSciChart() {
        // In order to load data file from the CDN we need to set dataUrl
        SciChart.SciChartSurface.configure({
          dataUrl: `https://cdn.jsdelivr.net/npm/scichart@${SciChart.libraryVersion}/_wasm/scichart2d.data`,
          wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${SciChart.libraryVersion}/_wasm/scichart2d.wasm`
        });
        // Create a SciChartSurface inside the div with id 'scichart-root'
        const {
          sciChartSurface,
          wasmContext
        } = await SciChart.SciChartSurface.create("scichart-root");

        // Add an X and a Y Axis
        const xAxis = new SciChart.NumericAxis(wasmContext);
        sciChartSurface.xAxes.add(xAxis);
        const yAxis = new SciChart.NumericAxis(wasmContext);
        sciChartSurface.yAxes.add(yAxis);
        
         // Create 100 dataseries, each with 10k points
        for (let seriesCount = 0; seriesCount < 100; seriesCount++) {       
            const xyDataSeries = new SciChart.XyDataSeries(wasmContext);
            const opacity = (1 - ((seriesCount / 120))).toFixed(2);
            // Populate with some data
            for(let i = 0; i < 10000; i++) {
                xyDataSeries.append(i, Math.sin(i* 0.01) * Math.exp(i*(0.00001*(seriesCount+1))));
            }
            // Add and create a line series with this data to the chart
            // Create a line series       
            const lineSeries = new SciChart.FastLineRenderableSeries(wasmContext, {
                dataSeries: xyDataSeries,
                stroke: `rgba(176,196,222,${opacity})`,
                strokeThickness:2
            });
            sciChartSurface.renderableSeries.add(lineSeries);
        }
        
        // BELOW ONE NOT WORKING
        // Add zoom, pan behaviours to the chart. Mousewheel zoom, panning and double-click to
        // zoom to fit
        const mouseWheelZoomModifier = new MouseWheelZoomModifier();
        const zoomPanModifier = new ZoomPanModifier();   
        const rubberBandZoomModifier = new RubberBandXyZoomModifier();
        const zoomExtentsModifier = new ZoomExtentsModifier();   
        sciChartSurface.chartModifiers.add(zoomExtentsModifier);
        sciChartSurface.chartModifiers.add(zoomPanModifier);
        sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
        sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);   
        const inputEnablePan = document.getElementById("enable-pan");
        const inputEnableZoom = document.getElementById("enable-zoom");
        const inputEnableZoomToFit = document.getElementById("enable-zoom-to-fit");
        const inputEnableMouseWheel = document.getElementById("enable-mouse-wheel-zoom");
        inputEnablePan.addEventListener("input", (event) => {
            zoomPanModifier.isEnabled = inputEnablePan.checked;
            rubberBandZoomModifier.isEnabled = !inputEnablePan.checked;
            inputEnableZoom.checked = !inputEnablePan.checked;       
            console.log(`Enabling Drag to Pan. Status: rubberBand checkbox ${inputEnableZoom.checked}, rubberBand ${rubberBandZoomModifier.isEnabled}, zoomPan checkbox ${inputEnablePan.isEnabled}, zoomPan ${zoomPanModifier.isEnabled} `);
        });
        inputEnableZoom.addEventListener("input", (event) => {
            rubberBandZoomModifier.isEnabled = inputEnableZoom.checked;
            zoomPanModifier.isEnabled = !inputEnableZoom.checked;
            inputEnablePan.checked = !inputEnableZoom.checked;
            console.log(`Enabling Drag to Zoom. Status: rubberBand checkbox ${inputEnableZoom.checked}, rubberBand ${rubberBandZoomModifier.isEnabled}, zoomPan checkbox ${inputEnablePan.isEnabled}, zoomPan ${zoomPanModifier.isEnabled} `);
        });
        inputEnableZoomToFit.addEventListener("input", (event) => {
            zoomExtentsModifier.isEnabled = inputEnableZoomToFit.checked;
            console.log("Enabling zoom extents");
        });
        inputEnableMouseWheel.addEventListener("input", (event) => {
            mouseWheelZoomModifier.isEnabled = inputEnableMouseWheel.checked;
            console.log("Enabling Mousewheel zoom");
        });
        
      }
      initSciChart();
    
    </script>
  </body>
</html>

Output:

The MouseWheelZoomModifier is actually the module that is import using import keyword in React tutorial but how can I use it in HTML & CSS based Web Page.

Kindly Help.

Solution

Because you are using SciChart's Browser module (where the code is served from CDN and JS rather than npm/webpack) you need to use a slightly different way to declare objects in code.

Note the Tutorial for setting up SciChart.js with browser module says

Notice every API call is prefixed by SciChart. when using the browser bundle. This is the global namespace for all SciChart apis, functions and types.

Once you have added the script to include scichart.js (and version)

<script src="https://cdn.jsdelivr.net/npm/scichart@2.1.2290/_wasm/scichart.browser.js" crossorigin="anonymous"></script>

You must now tell SciChart where to load the wasm files from. The easiest way to do this is to call SciChartSurface.useWasmFromCDN();

SciChart.SciChartSurface.useWasmFromCDN();

Next, when not using npm/webpack every type in the SciChart library is now prepended with the global variable SciChart.

For example in our npm/webpack docs this code:

const mouseWheelZoomModifier = new MouseWheelZoomModifier();
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);

must become this

const mouseWheelZoomModifier = new SciChart.MouseWheelZoomModifier();
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);

Alternatively you can pre-declare these types as follows:

// When using SciChart from CDN / browser bundle, there are no imports
// so either prepend every variable by global namespace SciChart.
// or use code like this to get the types out
const {
    MouseWheelZoomModifier,
    SciChartSurface,
    NumericAxis
} = SciChart;

// static func. Call once. load wasm from CDN 
SciChartSurface.useWasmFromCDN(); 

// Create a SciChartSurface in <div id="div-id"/>
const { sciChartSurface, wasmContext } = SciChartSurface.create("div-id");

// Add x,y axis 
sciChartSurface.xAxes.add(new NumericAxis(wasmContext)); 
sciChartSurface.yAxes.add(new NumericAxis(wasmContext)); 

// Add modifiers for zooming, panning
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);

Try that and see if it works