javascript - ng2-charts How to get the result of multiple push? -

i have worked chartsjs, has not been easy. show 2 lines of items on chart, can show 1 line @ time.

my result: https://www.dropbox.com/s/wjbee6ze16br00x/capturar.png?dl=0

how can 2 lines or more in chart?

my component.js

import { chartservice } './../service/chart.service'; import { component, oninit } '@angular/core'; import { datepipe } '@angular/common';  @component({   selector: 'app-linea',   templateurl: './linea.component.html',   styleurls: ['./linea.component.css'] }) export class lineacomponent implements oninit {  data_in: array<any> = []; labels: array<any> = []; options = { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2- digit', minute: '2-digit' };  datasets: array<any> = [   { data: [], label: 'price 24h' },   { data: [], label: 'open' } ];  public linecharttype: = 'line'; public linechartlegend: = true;  public linechartcolors: array<any> = [];  public linechartoptions: {   responsive: true };  constructor(private chartservice: chartservice) { }  public chartclicked(e: any): void {   console.log(e); }  public charthovered(e: any): void {   console.log(e); }  populatechart(obj) {    const labels: any[] = [];    (let = 0; < obj.length; i++) {      labels.push(new date(obj[i].time * 1000).tolocaledatestring('de-de', this.options));      this.datasets[0].data.push(obj[i].close);      this.datasets[1].data.push(obj[i].open);    }    settimeout(() => { this.data_in = this.datasets;     console.log(this.data_in); } );    this.labels = labels; }  ngoninit() {    this.getdata(); }  getdata() {   this.chartservice.getdata()    .subscribe(res => { this.populatechart(res); }); } } 

my component html:

<div class="row">  <div>   <div>    <canvas basechart width="400" height="200"             [data]="data_in"             [labels]="labels"             [options]="linechartoptions"             [colors]="linechartcolors"             [legend]="linechartlegend"             [charttype]="linecharttype"             (charthover)="charthovered($event)"             (chartclick)="chartclicked($event)"></canvas>    </div>  </div> </div> 

my service.js

import { injectable } '@angular/core'; import { http } '@angular/http'; import { observable } 'rxjs/rx'; import 'rxjs/add/operator/map';  @injectable() export class chartservice {  urlbase = 'https://min-api.cryptocompare.com/data/histohour?fsym=btc&tsym=usd&limit=24'; constructor(private http: http) { }  getdata() {   return this.http.get(this.urlbase)   .map(res => res.json().data); } } 

you binding data wrong property of canvas element/object. when have array of multiple datasets, must bind datasets property, instead of data.

also, should bind datasets property of class (not data_in) [datasets]
(here settimeout not doing think is)

... <canvas basechart width="400" height="200"         [datasets]="datasets"         [labels]="labels"         [options]="linechartoptions"         [colors]="linechartcolors"         [legend]="linechartlegend"         [charttype]="linecharttype"         (charthover)="charthovered($event)"         (chartclick)="chartclicked($event)">  </canvas> ... 

see- working example
^{(uses minimal code required)}