ng2-charts Биткойн живая диаграмма

Вот мои коды:

исторический-bpi.service.ts:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class HistoricalBpiService {

  private JsonBaseUrl: string = 'https://api.coindesk.com/v1/bpi/';

  constructor(private http:Http) { }

  getBpiData(url: string){
    return this.http.get(this.JsonBaseUrl+url)
      .map(res => res.json());
  }
}

рынок-данные.component.ts:

import { Component, OnInit } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';

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

  private dataUrl: string = 'historical/close.json';

  constructor(private historicalBpiService:HistoricalBpiService){}

  // lineChart
  public lineChartData:Array<any> = [
    {data:[]} 
  ];

  public lineChartLabels:Array<any> = [];
  public lineChartOptions:any = {
    responsive: true
  };
  public lineChartColors:Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  public lineChartLegend:boolean = false;
  public lineChartType:string = 'line'; 

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

  ngOnInit(){
    this.historicalBpiService.getBpiData(this.dataUrl)
      .subscribe(
        res => {
          this.lineChartData[0].data.push(res.bpi);
          this.lineChartLabels.push(res.bpi);
          this.lineChartData = [...this.lineChartData];
          this.lineChartLabels = [...this.lineChartLabels];
          console.log(this.lineChartData);
        }
      )
  }
}

Шаблон:

<div class="container">
  <div style="display: block;">
    <canvas baseChart
      [datasets]="lineChartData"
      [labels]="lineChartLabels"
      [options]="lineChartOptions"
      [colors]="lineChartColors"
      [legend]="lineChartLegend"
      [chartType]="lineChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>
  </div>  
</div>

Заранее спасибо.

РЕДАКТИРОВАТЬ: я получил данные на диаграмме, но почему-то они все еще не визуализируются.

Вот как я изменил код в файле component.ts (остальное то же самое):

ngOnInit(){
    this.historicalBpiService.getBpiData(this.dataUrl)
      .subscribe(
        res => {
          this.lineChartData.push(Object.values(res.bpi));
          this.lineChartLabels.push(Object.keys(res.bpi));
          this.lineChartData = [...this.lineChartData];
          this.lineChartLabels = [...this.lineChartLabels];
          console.log(this.lineChartData,this.lineChartLabels);
        }
      )
  }