Search results

Live Chart in React Chart component

28 Nov 2022 / 2 minutes to read

You can update a chart with live data by using the set interval.

To update live data in a chart, follow the given steps:

Step 1:

Initialize the chart with series.

Step 2:

Update the data to series using set interval, and shift the data in the series to make the series look like moving.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    constructor(props, chart) {
        super(props);
        this.series1 = [];
        this.value = 10;
        this.setTimeoutValue = 100;
        this.i = 0;
        for (; this.i < 50; this.i++) {
            if (Math.random() > .5) {
                this.value += Math.random() * 2.0;
            }
            this.series1[this.i] = { x: this.i, y: this.value };
        }
        this.chart = chart;
    }
    ;
    loaded(args) {
        this.intervalId = setTimeout(() => {
            if (this.chart === null) {
                clearInterval(this.intervalId);
            }
            else {
                if (Math.random() > .5) {
                    this.value += Math.random() * 2.0;
                }
                this.i++;
                this.series1.push({ x: this.i, y: this.value });
                this.series1.shift();
                args.chart.series[0].dataSource = this.series1;
            }
        }, this.setTimeoutValue);
    }
    render() {
        return <ChartComponent id='charts' loaded={this.loaded.bind(this)}>
      <Inject services={[LineSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.series1} xName='x' yName='y' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('charts'));
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, LineSeries, ILoadedEventArgs}
from'@syncfusion/ej2-react-charts';
import { getElement } from '@syncfusion/ej2-charts';

class App extends React.Component<{}, {}>{
  constructor(props: any, chart: ChartComponent) {
    super(props)
    for (; this.i < 50; this.i++) {
      if (Math.random() > .5) {
          this.value += Math.random() * 2.0;
      }
      this.series1[this.i] = { x: this.i, y: this.value };
    }
    this.chart = chart;
  };

  public chart: ChartComponent;
  public series1: Object[] = [];
  public value: number = 10;  
  public intervalId: any;
  public setTimeoutValue: number = 100;
  public i: number = 0;
  public loaded(args: ILoadedEventArgs): void {
    this.intervalId = setTimeout(
      () => {
        if (this.chart === null) {
          clearInterval(this.intervalId);
        } else {
          if (Math.random() > .5) {
              this.value += Math.random() * 2.0;
          }
          this.i++;
          this.series1.push({ x: this.i, y: this.value });
          this.series1.shift();
          args.chart.series[0].dataSource = this.series1;
        }
      },
      this.setTimeoutValue);
  }

  render() {
    return <ChartComponent id='charts'
      loaded={this.loaded.bind(this) as EmitType<ILoadedEventArgs>}>
      <Inject services={[LineSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.series1} xName='x' yName='y' type='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(<App />, document.getElementById('charts'));