Plotly graph in Angular renders only first received value

Question

I'm stuck with updating issue.

The graph plots first received value, but when I add more values to data[0].x and data[0].y they are not plotted at all. I verify that my data object correctly receives and contains the arrays by web inspector. I tried with and without ChangeDetectionStrategy (here is how I try to implement it, but with no success).

data-graph.component.ts

import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { formatDate } from '@angular/common';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-data-graph',
  template: '<plotly-plot [data]="data" [layout]="layout"></plotly-plot>',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class DataGraphComponent implements OnInit {
    constructor(
        private http: HttpClient,
        private _cd: ChangeDetectorRef
    ) {}

    private offset;
    public timeinterval;

    public data = [
        { 
            x: [  ],
            y: [  ], 
            mode: "lines+markers+text",
            text: [  ], 
            textposition: 'bottom',
            yaxis: "y",
            type: "scatter",
        }
    ];

    public layout = {
                autoexpand: "true",
                autosize: "true",
                width: '100%',
                height: 600,
                margin: {
                    autoexpand: "true",
                    margin: 0
                },
                offset: 0,
                hovermode: "closest",
                xaxis: {
                    linecolor: "black",
                    linewidth: 2,
                    mirror: true,
                    automargin: true,
                    type: 'date',
                    tickmode: 'auto'
                },
                yaxis: {
                    linecolor: "black",
                    linewidth: 2,
                    mirror: true,
                    automargin: true
                }
            }
    }

    public update_data(): void {
        this.http.get('/api/data/get/offset/' + this.offset)
            .subscribe(res => {
                this.data[0]['x'].push( formatDate(res['x'], 'yyyy-MM-dd', 'ru') );
                this.data[0]['y'].push( res['y'][0] );
                var new_x = this.data[0].x;
                var new_y = this.data[0].y;

                this.data = [ // try to update the data object to force graph to redraw
                    {
                        x: new_x,
                        y: new_y,
                        text: new_y,
                        mode: "lines+markers+text",
                        textposition: 'bottom',
                        yaxis: "y",
                        type: "scatter"
                    }]

                this._cd.detectChanges();
                this.offset = this.offset + 1;
            });
    }

    ngOnInit() {
        this.offset = 0;
        this.timeinterval = 1000;

        setInterval(() => {
            this.update_data();
        }, this.timeinterval);
    }

GET request to /api/data/get/offset/0 returns:

{
  "x": [
    "Fri, 03 Jan 2020 00:00:00 GMT"
  ], 
  "y": [
    "259.0000000"
  ]
}

Similarly, GET request to /api/data/get/offset/1 returns:

{
  "x": [
    "Mon, 06 Jan 2020 00:00:00 GMT"
  ], 
  "y": [
    "256.5500000"
  ]
}

and so on.

When page loads, nothing is on the graph. 1 second after OnInit the graph looks like this and not changing afterwards:

praegustator · Accepted Answer · 2020-12-20 20:35:06Z

I found a bug with exactly the same behaviour. I use [email protected] and it seems that bug persists in this version.

The solution for me was to use pure plotly.js. I changed the code as following:

import { Component, OnInit } from '@angular/core';
import { formatDate } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import * as Plotly from 'plotly.js/dist/plotly.js';
import { Config, Data, Layout } from 'plotly.js/dist/plotly.js';

@Component({
  selector: 'app-data-graph',
  template: '<div id="pagegraph" #pagegraph></div>'
})

export class DataGraphComponent implements OnInit {
    constructor(
        private http: HttpClient
    ) {}

    private offset;
    public timeinterval;

    public graph = {
        data: [{ 
            x: [ ], 
            y: [ ], 
            text: [ ], 
            type: 'lines+markers+text' 
        }],
        layout: {
            // here goes layout section 
        }
    };

    public update_data(): void {
        this.http.get('/api/data/get/offset/' + this.offset)
            .subscribe(res => {
                this.graph.data[0].x.push(formatDate(res['x'][0], 'yyyy-MM-dd', 'ru'));
                this.graph.data[0].y.push(res['y'][0]);
                this.graph.data[0].text.push(res['y'][0]);
                Plotly.update('pagegraph', this.graph.data, this.graph.layout); // <-- updated plot
                this.offset = this.offset + 1;
            });
    }

    ngOnInit() {
        this.offset = 0;
        this.timeinterval = 1000;

        Plotly.newPlot('pagegraph', this.graph.data, this.graph.layout); // <-- initial plot

        setInterval(() => {
            this.update_data();
        }, this.timeinterval);
    }

Collectives™ on Stack Overflow

Plotly graph in Angular renders only first received value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related