Plotly Graphs Not Updating

[NicholasZonenberg]

When I change the value of the variable I am using in html to create the plotly plot the plot itself is not updating. What is the correct way to update the data inside of an angular plotly plot?

[andrefarzat]

@NicholasZonenberg could you provide the ts code where is the data and the html template which plots the <plotly-plot> component ? 😸

[NicholasZonenberg]

HTML:

 <div id="actiDiv">
   <h3> Actigraphy</h3>
   <div id="actiDiv1">
     <plotly-plot id = "actiId1" [data] = "actiDataRef" [layout]="actiLayout"></plotly-plot>
   </div>
   <div id="actiDiv2">
     <plotly-plot id = "actiId2" [data] = "actiDataRef" [layout]="actiLayout"></plotly-plot> 
   </div>
   <div id="actiDiv3">
     <plotly-plot id = "actiId2" [data] = "actiDataRef" [layout]="actiLayout"></plotly-plot>
   </div>
   <div id="actiDiv4">
     <plotly-plot id = "actiId2" [data] = "actiDataRef" [layout]="actiLayout"></plotly-plot>
   </div>
</div>

TS:

import { Component, OnInit } from '@angular/core';
import { PlotlyModule } from 'angular-plotly.js';
import * as Plotly from 'plotly.js';

@Component({
  selector: 'app-acti-graph',
  templateUrl: './acti-graph.component.html',
  styleUrls: ['./acti-graph.component.scss']
})
export class ActiGraphComponent implements OnInit {

  public actiDataRef = [
    { 
      x: [ 'Noon', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm','10pm','11pm','12am','1am','2am','3am','4am','5am','6am','7am','8am','9am','10am','11am'], 
      y: [ 6,3,7,2,4,5,2,7,3,2,7,7,7,7,7,7,7,7,7,4,5,6,7,2],  
      type: 'bar',
      width: [ 0.09,0.09,0.09,0.09,0.09,0.09,0.09,0.09,0.09,0.09,1,1,1,1,1,1,1,1,1,0.09,0.09,0.09,0.09,0.09], 
      marker:{
        color: [ 'black','black','black','black','black','black','black','black','black','black','rgba(173, 216, 230, 0.5)','rgba(173, 216, 230, 0.5)','rgba(173, 216, 230, 0.5)','rgba(173, 216, 230, 0.5)','rgba(173, 216, 230, 0.5)','rgba(173, 216, 230, 0.5)','rgba(173, 216, 230, 0.5)','rgba(173, 216, 230, 0.5)','rgba(173, 216, 230, 0.5)','black','black','black','black','black']
      }
    },
    //{ x: [1, 24, 10, 10, 15, 15],
    //  type: 'box',
    //  orientation: 'h' },
    ];
    public actiData = [
      { 
        x: [ 'Noon', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm','10pm','11pm','12am','1am','2am','3am','4am','5am','6am','7am','8am','9am','10am','11am'], 
        y: [ 6,3,7,2,4,5,2,7,3,2,1,0,0,0,0,0,1,0,2,4,5,6,7,2], 
        type: 'bar' },
      //{ x: [1, 24, 10, 10, 15, 15],
      //  type: 'box',
      //  orientation: 'h' },
      ];
  
  public actiLayout = { 
      width: 980, height: 120, 
      margin: { l: 15, r: 0, t: 30, b: 20, pad: 0 }, 
      title: '7/25/18' }

  
  constructor(private plotlyPlot: PlotlyModule) { }

  updateGraph() {
    //this.layout.title = '7/25/18'
    //Plotly.newPlot('actiDiv1', this.data, this.actiLayout );
    this.actiDataRef= [{ 
      x: [ 'Noon', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm','10pm','11pm','12am','1am','2am','3am','4am','5am','6am','7am','8am','9am','10am','11am'], 
      y: [ 8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8],  
      type: 'bar',
      width: [ 0.09,0.09,0.09,0.09,0.09,0.09,0.09,0.09,0.09,0.09,1.05,1.05,1.05,1.05,1.05,1.05,1.05,1.05,1.05,0.09,0.09,0.09,0.09,0.09], 
      marker:{
        color: [ 'black','black','black','black','black','black','black','black','black','black','DeepSkyBlue','DeepSkyBlue','DeepSkyBlue','DeepSkyBlue','DeepSkyBlue','DeepSkyBlue','DeepSkyBlue','DeepSkyBlue','DeepSkyBlue','black','black','black','black','black']
      }
    },
    //{ x: [1, 24, 10, 10, 15, 15],
    //  type: 'box',
    //  orientation: 'h' },
    ];
  }

  ngOnInit() {
    //this.actiLayout.title = '7/25/18'
  }
  
}

[andrefarzat]

@NicholasZonenberg I could make it work using Angular: 6.1.0 and Angular CLI: 6.1.1`. Please check the code I used on this gist: https://gist.github.com/andrefarzat/8737a11d70da408fc74d55ab28038745
I added a "toggle" and "random" button to assure that it would be changing and, clicking on them, the graph changes as expected.
Can you confirm that like this works for you too ?

[NicholasZonenberg]

Yeah that code works. It does have an issue when I try and call the functions from another component though which is what I was trying to do. As it is though setting up a subscription system does allow me to update the graphs from another function. It's annoying to need to do that but if that's what I need to do it's what I need to do.

[arlowhite]

Sounds like an Angular change detection issue. If the event running that code isn't triggering change detection for the component, it may not update.

Try injecting private _changeDetectorRef: ChangeDetectorRef in the Component containing the Plotly component.
Then in that function that isn't updating, add:
this._changeDetectorRef.detectChanges();

[NicholasZonenberg]

When I add that as a property to the component I get an error saying:
Cannot read property 'detectChanges' of undefined

[arlowhite]

You need to inject ChangeDetectorRef in the constructor
https://angular.io/guide/dependency-injection#inject-a-service

[carkod]

How do the relayout and restyle get triggered?

[andrefarzat]

@carkod it uses IterableDiffer for the data and KeyValueDiffer for the layout property.
Check it our here: https://github.com/plotly/angular-plotly.js/blob/master/src/app/plotly/plot/plot.component.ts#L35 and here: https://github.com/plotly/angular-plotly.js/blob/master/src/app/plotly/plot/plot.component.ts#L131

Please, feel free to suggest better checking options 😸

[raghanag]

Hi @andrefarzat could you let me know how can i call the Plotly.relayout from the (click) function of the plotly-plot component or from angular component using plotly-plot component. Thanks.

[andrefarzat]

@raghanag there isn't an external api to manage the component directly. The component itself detect the changes on its properties and updates itself calling Plotly.update method. Do you need a different use case ?

[raghanag]

Hi @andrefarzat yes I am trying to use either angular-plotly or plotly js in angular to acheive the below use case, I have mentioned my usecase in the following plotly community.

https://community.plot.ly/t/plotly-relayout-and-popup-box-on-the-click-of-the-line-chart/12910

can you let me know how to achieve it best.

[andrefarzat]

@raghanag as I understood, you want to display a popup hover the graph using the x/y of the mouse. For this you gonna use https://plot.ly/javascript/text-and-annotations/ . Correct ?
So all examples at the end calls Plotly.relayout. I will make a test to assure that it works or not as is. If it doesn't work, I believe that a solution can be having an Angular service to the Plotly object.

[andrefarzat]

Updating to >1.0.0 should fix this