Live Intrday Stock Charts

Thread ID:	Created:	Updated:	Platform:	Replies:
150556	Jan 10,2020 07:34 PM UTC	Jan 13,2020 07:21 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Stock Chart

Prashansa

Asked On January 10, 2020 07:34 PM UTC

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

Reply | Reply with quote

Srihari Muthukaruppan [Syncfusion]

Replied On January 13, 2020 07:21 AM UTC

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.

Reply | Reply with quote

Live Intrday Stock Charts

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US