Search results

Create a Live Chart

You can update a chart with live data by using the set interval.

To update live data in a chart, follow the given steps:

Step 1:

Initialize the chart with series.

  import { Component } from '@angular/core';

@Component({
    selector: 'app-container',
    // specifies the template string for the Chart component
    template: `<ejs-chart id="chart-container"></ejs-chart>`
})
export class AppComponent {
    <e-series-collection>
                <e-series [dataSource]='data' type='Line' xName='x' yName='y'> </e-series>
    </e-series-collection>
}

Step 2:

Update the data to series, and refresh the chart at specified interval by using the set interval.

To refresh the chart, invoke the refresh method.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { ILoadedEventArgs, Series, ChartTheme, ChartComponent } from '@syncfusion/ej2-angular-charts';
import { getElement } from '@syncfusion/ej2-charts';

@Component({
    selector: 'app-container',
    template:
            `<ejs-chart #chart id='chart-container' [chartArea]='chartArea' [width]='width' align='center'  [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' (load)='load($event)' (loaded)='loaded($event)'>
        <e-series-collection>
            <e-series [dataSource]='series1' type='Line' xName='x' yName='y' width=2 [animation]='animation1'>
            </e-series>
        </e-series-collection>
    </ejs-chart>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public series1: Object[] = [];
    public value: number = 10;
    public intervalId: any;
    public setTimeoutValue: number;
    public i: number = 0;
    //Initializing Primary Y Axis
    public primaryYAxis: Object = {
        minimum:0,
        maximum: 50
    };
    @ViewChild('chart')
    public chart: ChartComponent;

    public marker: Object = {
        visible: true
    };
    public animation1: Object = {
        enable: false
    };
    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);
    }
    constructor() {
        for (; this.i < 100; this.i++) {
            if (Math.random() > .5) {
                if (this.value < 25) {
                    this.value += Math.random() * 2.0;
                } else {
                    this.value -= 2.0;
                }
            }
            this.series1[this.i] = { x: this.i, y: this.value };

        }

    };

}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
import { LineSeriesService, DateTimeService, DataLabelService,StackingColumnSeriesService,CategoryService, ChartShape,
       StepAreaSeriesService,SplineSeriesService,ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
       SelectionService,ScatterSeriesService,ZoomService
    } from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, AccumulationChartModule, GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ LineSeriesService, DateTimeService, DataLabelService, ZoomService, StackingColumnSeriesService,CategoryService,
               StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
               PieSeriesService, AccumulationTooltipService,ScrollBarService, AccumulationDataLabelService, SelectionService,ScatterSeriesService
               ,PageService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);