Search results

Live Chart in React Chart component

24 May 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, and refresh the chart at specified interval by using the set interval.

To refresh the chart, invoke the refresh method.

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'));