Closed
Description
Hi,
I am trying to show livedata from an API in a plotly graph updating 1-2 times per second.
Sadly I don't manage to update the graph, the code below draws the initial graph, than once more after 20 updates and than never again. Selecting or deselecting one of the traces draws everything correctly.
Any help what I am missing or if there is some bug present would be really appreciated.
HTML:
<plotly-plot [data]="graph.data" [layout]="graph.layout" useResizeHandler="true"></plotly-plot>
TS:
import {Component, OnDestroy, OnInit} from '@angular/core';
import {LiveMeasurementsService} from '../../services/live-measurements.service';
import {LiveData} from '../../model/live-data';
@Component({
selector: 'app-live',
templateUrl: './live.component.html',
styleUrls: ['./live.component.css'],
})
export class LiveComponent implements OnInit, OnDestroy {
private timestamps: Date[];
private y1: number[];
private y2: number[];
private y3: number[];
private graph;
private timeoutID;
constructor(public live: LiveMeasurementsService) {
}
ngOnInit() {
this.timestamps = [];
this.y1 = [];
this.y2 = [];
this.y3 = [];
this.graph = {
data: [
{x: this.timestamps, y: this.y1, type: 'scatter'},
{x: this.timestamps, y: this.y2, type: 'scatter'},
{x: this.timestamps, y: this.y3, type: 'scatter'},
],
layout: {
autosize: true,
title: 'Live Plot',
font: {family: 'Roboto, "Helvetica Neue", sans-serif'},
margin: {t: 50, b: 20, l: 40, r: 40},
}
};
this.startUpdate();
}
startUpdate() {
this.timestamps.push(new Date());
this.y1.push(Math.random());
this.y2.push(Math.random());
this.y3.push(Math.random());
this.timeoutID = setTimeout(() => this.startUpdate(), 1000);
}
updateGraph(values: LiveData) {
}
ngOnDestroy(): void {
clearTimeout(this.timeoutID);
}
}