将数据添加到 Lightning Chart 中的现有图表系列

Question

I have a react js application in which, I have used a point series to plot data in chart.

I got the chart to display. But, I want real time data to be binded to chart.

Eg: If a chart contains 10 points on loading, it is marked to chart. Then in 5 sec interval, I will be getting datas from socket which I have to add to the existing chart. So now, there has to be 15 points in charts and the chart has to move from left to right as the data comes in.

Here is my code that is used to bind data at the starting

    import {
  lightningChart,
  AxisTickStrategies,
  LegendBoxBuilders,
  Themes,
  PointShape,
  translatePoint,
  AxisScrollStrategies
} from "@arction/lcjs";


const dateOrigin = new Date(startingDate);
    const chart = lightningChart()
      .ChartXY({
        container: id,
        theme: Themes.lightNew,
        columnIndex: 0,
        columnSpan: 1,
        rowIndex: 0,
        rowSpan: 1
      })
      .setTitle(id.split(" ")[1]);

    const originDate = new Date(moment().subtract(1, 'days'))

    const xAxis = chart.getDefaultAxisX().setTickStrategy(
      // Use DateTime TickStrategy for this Axis
      AxisTickStrategies.DateTime,
      // Modify the DateOrigin of the TickStrategy
      // (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)
      (tickStrategy) => tickStrategy.setDateOrigin(originDate)
    );

    const yAxis = chart
      .getDefaultAxisY()
      .fit(true)
      .setScrollStrategy(undefined)
      .setInterval(-20, 20)
      .setTitle("");

    const series = chart
      .addPointSeries({
        xAxis: xAxis,
        yAxis: yAxis,
        pointShape: PointShape.Circle
      })
      .setName("Actual");

const dataFrequency = ((((600 - 600 * 250) - (60 * 60 * 100)) - (1000 * 2)) - 900)
      //0-24 hrs
      chart.getDefaultAxisX().setInterval(92 * dataFrequency, 60);

series.add(
      sensorData.map((point) => ({
        //x: new Date(point.x).getTime() - startingDate.getTime(),

        x: new Date(point.x).getTime() - new Date(startingDate).getTime(),
        y: point.y, // * 1000,
      }))

    );

Please let me know how the incomming data from socket has to be added to the existing points in charts.

Thanks in Advance.

Answer 1

You can append more data points to a PointSeries with another call to add method, same way as you use it for the initial data.

So keep a reference to the PointSeries object and when you receive the new data from websocket just use the add method in exactly same way as you did before to append the data on top of the previous data points.

For "moving the chart from left to right as data points come in", you should configure the X axis scroll strategy to be progressive. Please refer to this ECG chart example for code reference (line 44, chart.getDefaultAxisX()... ).

For means of Stack Overflow historical completeness I'll also add the highlighted code line here:

// Configure X Axis as progressive scrolling with value interval of 1000
chart.getDefaultAxisX().setInterval(0, 1000).setScrollStrategy(AxisScrollStrategies.progressive)