Search results

Live Chart in React Chart component

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.tsx
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<{}, {}>{

  private chart: ChartComponent;
  public series1: Object[] = [];
  public value: number = 10;
  public intervalId: any;
  public setTimeoutValue: number;
  public i: number = 0;
  public loaded(args: ILoadedEventArgs): void {
    this.setTimeoutValue = 100;
    this.intervalId = setInterval(
      () => {
        let i: number;
        if (getElement('charts') === null) {
          clearInterval(this.intervalId);
        } else {
          if (Math.random() > .5) {
            if (this.value < 25) {
              this.value += Math.random() * 2.0;
            } else {
              this.value -= 2.0;
            }
          }
          this.i++;
          this.series1.push({ x: this.i, y: this.value });
          this.series1.shift();
          args.chart.series[0].dataSource = this.series1;
          args.chart.refresh();
        }
      },
      this.setTimeoutValue);
  }
  constructor() {
    super()
    for (; this.i < 100; this.i++) {
      if (Math.random() > .5) {
        if (this.value < 25) {
          this.value += Math.random() * 2.0;
        } else {
          this.value -= 2.0;
        }
      }
      this.series1[this.i] = { x: this.i, y: this.value };

    }
  };

  render() {
    return <ChartComponent id='charts'
      primaryXAxis={{ majorGridLines: { width: 0 } }}
      primaryYAxis={{ minimum: 0, maximum: 50 }}
      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'));