Display Live data in Chart similar to ECG

[Albert K]

Hi,

Is it possible to display data where the new data is progressively replacing existing data like the ECG live chart (from left to right)?.

https://www.youtube.com/watch?v=9ZTfR4AHq-c&ab_channel=michelekunz

[Durga Gopalakrishnan]

Hi Albert, 

 

Greetings from Syncfusion. 

 

We have prepared sample based on your requirement. In the sample, we have updated chart data using setInterval and clearInterval methods in chart loaded event. Please check with below sample link. 

 

<ejs-chart #chart id='chart-container' (loaded)='loaded($event)'> 

        <e-series-collection> 

            <e-series [dataSource]='series1' xName='x' yName='y'> 

            </e-series> 

        </e-series-collection> 

</ejs-chart> 

 

public loaded(args: ILoadedEventArgs): void { 

        this.setTimeoutValue = 100; 

        this.intervalId = setInterval( 

            () => { 

                let i: number; 

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

                    clearInterval(this.intervalId); 

                } else { 

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

                        if (this.value < 25) { 

                            this.value += Math.random() * 2.0; 

                        } else { 

                            this.value -= 2.0; 

                        } 

                    } 

                    this.i++; 

                    this.series1.push({ x: this.i, y: this.value }); 

                    this.series1.shift(); 

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

                    args.chart.refresh(); 

                } 

            }, 

            this.setTimeoutValue); 

    } 

 

Sample : https://stackblitz.com/edit/angular-3uelub 

 

Please revert us, if you have any concerns. 

 

Regards, 

Durga G