Live data in Angular Stock chart component

27 Sep 20238 minutes to read

You can update a stockchart 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.

  import { Component } from '@angular/core';

@Component({
    selector: 'app-container',
    // specifies the template string for the StockChart component
    template: `<ejs-stockchart id="chart-container" #chart [primaryXAxis]='primaryXAxis' [periods]='periods'>
        <e-stockchart-series-collection>
            <e-stockchart-series [dataSource]='series1' type='Candle' xName='x' yName='high' high='high' low='low' name='India' width=2 >
            </e-stockchart-series>

        </e-stockchart-series-collection>
    </ejs-stockchart>`
})
export class AppComponent {

}

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.

app.component.ts
app.module.ts
main.ts
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { IStockChartEventArgs, getElement, PeriodsModel, StockChartComponent } from '@syncfusion/ej2-angular-charts';
import {StockChart, StockChartAxisModel } from '@syncfusion/ej2-charts';

@Component({
    selector: 'app-container',
    template:
            `<ejs-stockchart id="chart-container" #chart [primaryXAxis]='primaryXAxis' [periods]='periods' title="Live Stock Chart">
        <e-stockchart-series-collection>
            <e-stockchart-series [dataSource]='series1' type='Candle' xName='x' yName='high' high='high' low='low' name='India' width=2 >
            </e-stockchart-series>

        </e-stockchart-series-collection>
    </ejs-stockchart>`
})
export class AppComponent implements OnInit, OnDestroy {
  public chartData?: Object[];
  public title?: string;
  public point1?: Object;
  public range?: boolean;
  public period?: boolean;
  public primaryXAxis: StockChartAxisModel = { valueType: 'DateTime' };
  public series1: Object[] = [];
  public value: number = 10;
  public intervalId?: any;
  public setTimeoutValue?: number;
  public i: number = 0;
  public date: Date = new Date('2019-09-16');
  public periods?: PeriodsModel[];

  @ViewChild('chart', {  static: true })
  public stock?: StockChartComponent | StockChartComponent;

  ngOnInit() {
    this.title = 'Efficiency of oil-fired power production';
    this.range = false;
    this.period = false;
    this.periods = [
      { intervalType: 'Minutes', interval: 1, text: '1m' },
      { intervalType: 'Minutes', interval: 30, text: '30m', },
         { intervalType: 'Hours', interval: 1, text: '1H', selected: true },
      { intervalType: 'Hours', interval: 2, text: '2H' },


  ];
    this.setTimeoutValue = 5000;
    this.intervalId = setInterval(
      () => {
        let i: number;
        if (getElement('chart-container') === null) {
          clearInterval(this.intervalId);
        } else {

          this.date = new Date(this.date.getTime() + (1 * 60 * 1000));
          // this.series1.push( { x: this.date, high: 100, low: 50, open : 60,
          //   close :  70 });
          this.series1.push( {
            x: this.date,
            high: Math.floor(Math.random() * (100 - 90 + 1) + 90),
            low: Math.floor(Math.random() * (60 - 50 + 1) + 50),
            close: Math.floor(Math.random() * (99 - 51 + 1) + 51),
            open: Math.floor(Math.random() * (99 - 51 + 1) + 51)
          });
          this.i++;
          (this.stock as StockChartComponent ).series[0].dataSource = this.series1;
          this.stock?.refresh();
        }
      },
      3000);
  }
    ngOnDestroy() {
    clearInterval(this.intervalId);
  }
  constructor() {
    for ( ; this.i < 60; this.i++) {
      if (Math.random() > .5) {
        if (this.value < 25) {
          this.value += Math.random() * 2.0;
        } else {
          this.value -= 2.0;
        }
      }
      this.date = new Date(2019, 8, 16, 10, this.i);
      //this.date = new Date(this.date.setDate(this.date.getDate() + 1));
      this.series1[this.i] = {
        x: this.date,
        high: Math.floor(Math.random() * (100 - 90 + 1) + 90),
        low: Math.floor(Math.random() * (60 - 50 + 1) + 50),
        close: Math.floor(Math.random() * (99 - 51 + 1) + 51),
        open: Math.floor(Math.random() * (99 - 51 + 1) + 51)
      };
    }
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { StockChartModule, DateTimeService, CandleSeriesService } from '@syncfusion/ej2-angular-charts';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, StockChartModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ DateTimeService, CandleSeriesService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);