DEV Community

Luciano Pinheiro
Luciano Pinheiro

Posted on • Edited on

Update plotly.js data in Angular

The problem

I have data coming from a socket.io server. Every new arriving message is sent to an array. I'm using a Service to keep all my data. It allows me to share the data among components.


// app.component.ts
  constructor(
    private webSocketService: WebSocketService,
    private data: SessionDataService 
  ) {
    this.socket.on('balance', (message: any) => {
      this.data.setBalance(JSON.parse(message));
    });
  }

// session-data.service.ts
export class SessionDataService {
  setBalance(balance: any) {
    this.balance = balance;
    this.balance_history.push(balance);
  }
}

Enter fullscreen mode Exit fullscreen mode

At some point, I needed a graph to plot that history. I made a new component and put my data there, but it didn't work. Why? The update happened only at beginning of the Component.

// wallet component
// doesn't work
export class WalletComponent {
  balance_history: any[] = [];
  constructor(data: SessionDataService) {
    balance_history = data.balance_history;    
  }
}
Enter fullscreen mode Exit fullscreen mode

The solution

If we need to get the updated version, we need to subscribe the data through a Observer. So, it will update every time the value changes. Remember that if you leave the component, the data will be destroyed. So, we must keep all the data in the service.

The solution is something like this:

// wallet component uses service
export class WalletComponent {
  // define data that will be shown in the template
  plot_data: any[] = [];

  constructor(data: SessionDataService) {
    // subscribe to the observable
    data.wallet_history.subscribe((balance) => {
      // every time there is a new message, 
      // we update service data and local variable
      this.update_plot_data();
    });    
  }

  update_plot_data() {
    // data in format plotly will understand
    this.plot_data = {
      data: [
        {
          x: this.data.balance_history.map((_: number, index: number) => index),
          y: this.data.balance_history,
          type: 'scatter',
          mode: 'lines+points',
          marker: { color: 'red' },
        },
      ],
    };
  }
}

// service SessionDataService 
export class SessionDataService {
  wallet: any = {};
  balance_history: any = [];

  messages: string[] = [];

  // make observable
  private wallet_historySource = new BehaviorSubject({});
  public wallet_history = this.wallet_historySource.asObservable();

  // when receive a websocket message from server, 
  // 
  setWallet(wallet: any) {
    this.wallet = wallet;
    this.balance_history.push(wallet.balance);
    this.wallet_historySource.next(wallet.balance);
  }

}
Enter fullscreen mode Exit fullscreen mode

A variation of this solution is to keep plot_data inside SessionDataService so you don't have to use observable. Maybe it's in fact a better solution for this case, but I could not show the subscription feature.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay