Angular Binding Real-Time Data

The Angular financial chart component is very fast control that can handle rendering of data in real-time. The following demo shows how the financial chart component is capable of handling high frequency of data updates.

Angular Binding Real-Time Data Example

Code Example

You can create the Angular financial chart component with high frequency data updates by removing the first data item from your data source and appending a new data item to end of your data. Also, you should call notifyRemoveItem and notifyInsertItem functions to notify the chart about changes. Also, you can look for more "notify" methods on the financial chart to get more information about how to notify the chart of changes to the data it is bound against.

The following example demonstrates how to notify Financial Chart control about high frequency data updates:

private tick(): void {
    const newVal = this.getValue();
    const oldVal = this.data[0];

    this.data.push(newVal);
    this.chart.notifyInsertItem(this.data, this.data.length - 1, newVal);

    this.data.splice(0, 1);
    this.chart.notifyRemoveItem(this.data, 0, oldVal);
}

Additional Resources