Live Intrday Stock Charts

[Prashansa]

Hi,

Is there any demo for Live Stock Charts? I have created the Stock charts and tried to add the live feature by pushing the new data  after every second once the stock chart is loaded. 

1. On loaded event, in an interval of 1 second

2. Created a new data point

3. Push the data point to the series

4. Removed the 0 index data point from the series and ensured that 1440 points are there in the series

5. Refresh the chart

  public loaded(args: IStockChartEventArgs): void {

    this.intervalId = setInterval(

        () => {

            if (getElement('chart-container') === null) {

                clearInterval(this.intervalId);

            } else {

                if (Math.random() > .5) {

                    this.value += this.generateRandomNumber(1000, 5000);

                } else {

                    this.value -= this.generateRandomNumber(1000, 5000);

                }

                this.series1.push({ x: new Date(2000, 1, 1, 0, this.i), y: this.value.toFixed(1) });

                this.series1.shift();

                args.stockChart.series[0].dataSource = this.series1;

                args.stockChart.refresh();

                this.i++;

            }

        },

        1000);

}

<div>

        <ejs-stockchart id='stockChartIntraday' [chartArea]='chartArea' [periods]='periods'

        [exportType]='exportType' [seriesType]='seriesType'

            [indicatorType]='indicatorType' [trendlineType]='trendlineType' [primaryXAxis]='primaryXAxis'

            style="display:block;"

            [primaryYAxis]='primaryYAxis' [crosshair]='crosshair' [title]='title' [titleStyle]='titleStyle'

            (loaded)='loaded($event)'

            (load)='load($event)'>

            <e-stockchart-series-collection>

                <e-stockchart-series [animation]='animation1' [dataSource]='series1' type='Line' xName='x' yName='y' name='demo'>

                </e-stockchart-series>

            </e-stockchart-series-collection>

        </ejs-stockchart>

    </div>

The chart updates but browser crashes after a few minutes.

Looking for guidance.

Thanks

[Srihari Muthukaruppan]

Hi Prashansa, 

We have analyzed your query. Based on your requirement we have prepared a sample for your reference. We have also attached our documentation link for creating live stockchart for your reference. Please find the below UG link, sample, code snippet and screenshot. 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/stock-chart/how-to/live-data/?no-cache=1 

 

Code Snippet: 

  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: 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.series[0].dataSource = this.series1; 

          this.stock.refresh(); 

        } 

      }, 

      1000); 

  } 

  ngOnDestroy() { 

    clearInterval(this.intervalId); 

  } 

 

Sample: https://stackblitz.com/edit/angular-epaj8q?file=app.component.ts 

 

Screenshot: 

 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M.