Updating Chartjs dataset in Ionic

Question

I was trying to update a bar chart dataset by appending newer data to it using Chartjs. According to doc here, I need to update the datasets.data array and labels. I created the following component in Ionic:

chart.component.ts

import { SensorDataService } from './sensor-data.service';
import { Component, Input, AfterViewInit, ViewChild, ElementRef } from '@angular/core';


declare var Chart: any;

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss'],
})
export class ChartComponent implements AfterViewInit {
  //@Input() chartId: string;
  //@Input() chartTitle: string;
  @Input() data: Array<number>;
  @Input() labels: Array<string>;
  //@Input() datasetLabel: string;
  interval: any;
  count: number;
  @ViewChild('chart') chartRef: ElementRef;
  chart: any;

  constructor(private dataService: SensorDataService) { }

  ngAfterViewInit() {
    console.log(this.data);
    console.log(this.labels);
    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'bar',
      data: {
        labels: this.labels,
        datasets: [{
          label: 'label',
          data: this.data,
          backgroundColor: 'rgb(0, 0, 255)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });
    this.count = 0;
    this.interval = setInterval(this.loadData.bind(this), 5000);
  }
  loadData() {
    if (this.count > 10) {
      return clearInterval(this.interval);
    }
    const { data, labels } = this.dataService.getData();
    console.log('data loaded');
    console.log(this.chart.data.labels);
    console.log(this.chart.data.datasets[0].data);
    this.chart.data.labels.concat(labels);
    this.chart.data.datasets.forEach(ds => ds.data.concat(data));
    this.count++;
    this.chart.update();
  }
}

chart.component.html

<ion-card>
    <ion-card-header>
        <ion-card-title>Title</ion-card-title>
    </ion-card-header>
    <ion-card-content>
        <canvas #chart></canvas>
    </ion-card-content>
</ion-card>

From the console log, I don't see any changes in the size of the array. The graph remains the same as well. I created this as a test before connecting the data from http endpoint where, each request will return newer data and I have to append it to the existing chart. What's wrong with my code as given here and why is the chart not updating?

Answer 1

The Array.concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

Therefore, you should change your loadData() method as follows:

loadData() {
  if (this.count > 10) {
    return clearInterval(this.interval);
  }
  const { data, labels } = this.dataService.getData();
  this.chart.data.labels = this.chart.data.labels.concat(labels);
  this.chart.data.datasets.forEach(ds => ds.data = ds.data.concat(data));
  this.count++;
  this.chart.update();
}