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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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(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



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. 
 
 
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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon