We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Live Intrday Stock Charts

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(argsIStockChartEventArgs): void {
    this.intervalId = setInterval(
        () => {
            if (getElement('chart-container') === null) {
                clearInterval(this.intervalId);
            } else {
                if (Math.random() > .5) {
                    this.value += this.generateRandomNumber(10005000);
                } else {
                    this.value -= this.generateRandomNumber(10005000);
                }
                this.series1.push({ x: new Date(2000110this.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



1 Reply

SM Srihari Muthukaruppan Syncfusion Team 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. 
 
 
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); 
  } 
 
 
Screenshot: 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon