ng2-charts Bitcoin live chart

Question

I'm newbie and I'm trying to render the live Bitcoin chart using ng2-charts library, I fetched the data but somehow I did not know how to visualize the data to the chart due to the structure of data which something like this:

"bpi": { "2017-08-11": 3679.6074, "2017-08-12": 3917.6487, "2017-08-13": 4111.1963}

This is the api: https://api.coindesk.com/v1/bpi/historical/close.json

This is the model chart I want to make it: https://www.coindesk.com/price/

Here are my codes:

historical-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());
  }
}

market-data.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);
        }
      )
  }
}

The template:

<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>

Thank you in advance.

EDIT: I got the data into the chart, but somehow it is not visualized still.

This is how I changed the code in the component.ts file (the rest is the same):

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);
        }
      )
  }

This is the chart I got without any errors:

Answer 1

You should populate the data and labels array like this :

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