title: How to update Barchart of Ngx-charts graph dynamically in angular through the Websocket's data
body: <p>i am creating angular based dashboard and Dashboard contains NGX chart graph. i want to update the bar chart dynamically wrt web socket.
          Here, fetching data through web socket. and need to update the bar chart dynamically.If single bar chart is added to the dashboard then i am able to update the bar chart with the web socket's data. but not able to update the bar chart, if more then one bar chart is added to the dashboard.  As always it is updating the last added bar chart. for example:- if three bar chart is added in the dashboard. then it is always updating the last bar chart added through the web socket. please, help me out. i am stuck to it. </p>
  
  <pre><code>BarchartGadget.component.ts
  </code></pre>
  
  <p>// This is the websocket, fetching the data from the websocket service class. with the fetching converting the data to supported Json data for the ngx batchart data formate. and pushing the formated json data to the bar chart data.</p>
  
  <pre><code>     this.websocket = this.observableWebSocketService.createObservableWebSocket(this.CHAT_URL + this.token).subscribe(data=&gt; {
            this.dataPointData = JSON.parse(data);
            console.log("web soket data received"+JSON.stringify(data));
            var date = new Date(this.dataPointData.payload.value.timestamp);
            this.webSocketData =
            {
              "name": date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(),
              "series": [
                {
                  "name": this.dataPointData.payload.value.dataType,
                  "value": this.dataPointData.payload.value.value
                }
              ]
            }
  
  
            this.JsonData.push(this.webSocketData);
            this._barChartService.getData(this.endpointObject.address)
              .subscribe(data =&gt; {
                 Object.assign(this, {data});
                if (this.JsonData.length &gt; 6) {
                  this.JsonData.shift();
                }
                for (var i = 0; i &lt; this.JsonData.length; i++) {
                  this.data.push(this.JsonData[i]);
                }
              },
                error =&gt; this.handleError(error));
          });
  </code></pre>
  
  <p>// here creating connection with some waiting time. and invoking the sendmessage to make connection with websocket
  <a href="https://i.stack.imgur.com/8lS8S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8lS8S.png" alt="enter image description here"></a></p>
  
  <pre><code>        const _timer = timer(this.waitForConnectionDelay);
          _timer.subscribe(t =&gt; {
            for(var i=0;i&lt;this.dpXId.length;i++) {
              this.message = {
                "xid": this.dpXId[i],
                "eventTypes": ["CHANGE", "UPDATE"]
              };
              this.observableWebSocketService.sendMessage(this.message);
            }
          });
  </code></pre>
  
  <p>I expected to update all the barcharts added wrt to their data getting from websocket.
      // As in the image, only 2nd chart(it is listed in the last of the queue) is updating dynamically with the websocket data. </p>