Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – ReactJS Sweep Line Demo: Issue with Multiple Surfaces Not Updating Simultaneously

I need to make a demo of a sweep line with multiple surfaces with reactjs, but The problem is that when I choose to show more than 1 surface it only plays on the data on the latest created surface and stops drawing data on the old surfaces.

you can see the example here with the code: https://28zf6p.csb.app/

this is a GIF for the problem:
enter image description here

note: the reason I need multiple surfaces is that I want to have the charts draggable with sortableJS to follow the design I got.

Tags:

2

Answers


  1. 0

    I did not dig deep, it seems that there is an error in the functions that generate graphs and the link to the div is remembered.

    However, if you add the id attribute to the div, it starts working as it should. Perhaps the library itself, under the hood, uses the id to access the DOM element.

    in App.js

    for (let i = 0; i < value; i++) {
  sciCharts.push(<SciChart key={i} id={i} />);
}

    in SciChart.jsx

    const SciChart = ({ id }) => {
...
return (
  <div id={id} ref={ref} style={{ height: "20%", width: "20%" }}>
    SciChart
  </div>
);
}

    test here https://codesandbox.io

    Login or Signup to reply.
  2. 0

    You can use an open-source official React wrapper for scichart.
    It seems to resolve the issue.
    Check out the Live Example

    // SciChart.jsx

import { useRef } from "react";
import { SciChartReact } from "scichart-react";
import { dataForSciChart, drawData, initScichart } from "./initScichart";

const SciChart = () => {
  const intervalTimer = useRef();
  return (
    <SciChartReact
      style={{ height: "20%", width: "20%" }}
      fallback={<>Loading</>}
      initChart={initScichart}
      onInit={({ xyDataSeries }) => {
        intervalTimer.current = drawData(xyDataSeries, dataForSciChart);
      }}
      onDelete={() => {
        clearInterval(intervalTimer.current);
      }}
    />
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search