title: Unable to Initialize ngx-charts with API fetched Data
body: <p>I'm having some bad times while trying to initialize a chart built using <a href="https://github.com/swimlane/ngx-charts" rel="nofollow noreferrer">ngx-charts</a> with API fetched data.</p>
  
  <p>I built a rest api that, upon a proper call, spits out some time-series data.</p>
  
  <pre><code>{
      "prices": [
          {
              "item": "1",
              "price": 2,
              "estimated": 2.1,
              "date": [
                  2012,
                  8,
                  16
              ]
          },
          {
              "item": "1",
              "price": 3,
              "estimated": 4.1,
              "date": [
                  2012,
                  9,
                  16
              ]
          },
          {
              "item": "1",
              "price": 5,
              "estimated": 7.1,
              "date": [
                  2012,
                  10,
                  16
              ]
          }
      ]
  }
  </code></pre>
  
  <p>And I built <strong>price.model.ts</strong> to correctly handle it, and it works just fine</p>
  
  <pre><code>export class PriceModel {
      public id: string;
      public price: number;
      public estimated: number;
      public date: number[];
  
      constructor(
           id: string,
           price: number,
           estimated: number,
           date: number[]
      ) {
          this.id = id;
          this.price = price;
          this.estimated = estimated;
          this.date = date;
       }
  }
  </code></pre>
  
  <p>Then, I set up my <strong>details.component.ts</strong> in order to perform such api call, get the data, parse it and render it into the chart.</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NgxChartsModule } from '@swimlane/ngx-charts';
  import { Http } from '@angular/http';
  
  /** App Models **/
  import { PriceModel } from '../../shared/components/prices/price.model';
  import { ChartDataModel } from '../../shared/components/prices/chart-data.model';
  
  @Component({
    selector: 'app-details',
    templateUrl: './details.page.html',
    providers: [NgxChartsModule]
  })
  
  export class DetailsPage {
  
    private sub: any;
    private prices: PriceModel[];
    ngxData: ChartDataModel = {
      data: [
        {
          name: 'prices',
          series: []
        },
        {
          name: 'forecast',
          series: []
        }
      ]
    };
  
    view: any[] = [1000, 750];
  
    // options
    showXAxis = true;
    showYAxis = true;
    gradient = false;
    showLegend = true;
    showXAxisLabel = true;
    xAxisLabel = 'Dates';
    showYAxisLabel = true;
    yAxisLabel = 'Prices';
  
    colorScheme = {
      domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
    };
  
    // line, area
    autoScale = true;
  
    constructor(private _http: Http) {
      console.log(this.ngxData.data);
      Object.assign(this.ngxData);
    }
  
    ngOnInit() {
      this.sub = this._http.get('someroute').subscribe((prices) =&gt; {
          this.prices = prices.json().prices;
          let currData;
          this.prices.map((p) =&gt; {
            currData = new Date(p.date[0], p.date[1], p.date[2]);
            this.ngxData.data[0].series.push({ name: currData.getTime().toString(), value: p.price });
            this.ngxData.data[1].series.push({ name: currData.getTime().toString(), value: p.estimated });
          });
        }, (err) =&gt; {
          console.log(err);
      });
    }
  
    ngOnDestroy() {
      this.sub.unsubscribe();
    }
  
  }
  </code></pre>
  
  <p>Where my <strong>ChartDataModel.ts</strong> is defined as</p>
  
  <pre><code>export class ChartDataModel {
      public data: SerieModel[];
      constructor(data:  SerieModel[]) {
          this.data = data;
      }
  }
  
  export class SerieModel {
      public name: string;
      public series: SeriersChildModel[];
      constructor(name:  string, series: SeriersChildModel[]) {
          this.name = name;
          this.series = series;
      }
  }
  
  export class SeriersChildModel {
      public name: string;
      public value: number;
      constructor(name:  string, value: number) {
          this.name = name;
          this.value = value;
      }
  }
  </code></pre>
  
  <p>And, finally, here's my <strong>details.page.html</strong></p>
  
  <pre><code>&lt;ngx-charts-line-chart
    [view]="view"
    [scheme]="colorScheme"
    [results]="ngxData.data"
    [gradient]="gradient"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [legend]="showLegend"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    [autoScale]="autoScale"&gt;
  &lt;/ngx-charts-line-chart&gt;
  </code></pre>
  
  <p>Logging <code>this.ngxData.data</code> before <code>Object.assign</code> prints everything just fine</p>
  
  <p><a href="https://i.stack.imgur.com/6FBrI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6FBrI.png" alt="enter image description here"></a></p>
  
  <p>But I end up having the following result</p>
  
  <p><a href="https://i.stack.imgur.com/K3AWR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K3AWR.png" alt="enter image description here"></a></p>
  
  <p>I followed the example available <a href="https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html" rel="nofollow noreferrer">here</a> but ended up with no data actually displaying.</p>
  
  <p>I don't understand why, even though data is formatted as the library wants, data isn't shown.</p>
  
  <p><strong>What Am I doing wrong? Is it caused by a wrong initialization in the constructor?</strong></p>