Wsrtjtyk

I'm using Angular 6 and trying to implement a Chart.js line chart. Basically, I'm calling my API for two arrays: a weight_data array and a weight_date array and using them for the chart.

I store the arrays I got from the API request in two instances: this.weight_date and this.weight_data.

Here's the code for the chart:

//   code for chart here

this.chart = new Chart(this.chartRef.nativeElement, {

  type: 'line',

  data: {

    labels: this.weight_date, // your labels array

    datasets: [

      {

        data: this.weight_data, // your data array

        borderColor: '#e0573a',

        fill: true

      }

    ]

  },

  options: {

    legend: {

      display: false

    },

    scales: {

      xAxes: [{

        display: true

      }],

      yAxes: [{

        display: true

      }],

    },

    title: {

      display: true,

      text: 'Weight Tracker',

      fontFamily: "'Montserrat', sans-serif",

      fontColor: '#272727',

      fontSize: 18,

      padding: 12

    },

    layout: {

      padding: {

          left: 10,

          right: 20,

          top: 0,

          bottom: 0

      }

    },

    gridLines: {

      drawOnChartArea: true

    },

  }

});

It's works okay when I use pre-coded arrays (["11/02/18", "11/03/18", "11/04/18"] for dates and [65, 66, 67] for weight). But when I try to use the two instances, the chart comes up blank. There's no error of sorts, it's just blank.

I'm doing the API call first then initializing the chart, respectively, in ngOnInit. What am I missing here?

It looks like you want to subscribe to an observable which can provide the data, and once it comes in, you can then initialize your chart. Usually, we would want to have the HTTP call occur within a service, but to simplify, this is how we could do with within a component:

import {HttpClient} from '@angular/common/http';

import {Observable} from 'rxjs/Observable';

import {Component, OnInit} from '@angular/core';





export class MyChart implements OnInit {



  constructor(private http: HttpClient) { }



  private getData() {

    let url = '[SOME-URL]' // your path to the data API endpoint

    return this.http.get(url) as Observable<Array<any>>; // you would want to use correct typings here, instead of <any>

  }



  ngOnInit() {

    this.getData().subscribe((data: any) => {

      console.log(data);

      // assign your data here, and then initialize your chart.

    });

  }

}

I just found out what I was doing wrong: I'm using axios, which is promise-based, so taking @JeffFhol's suggestion into account, my two instances were blank since I was initializing the chart at the same time I was making the API request.

The solution was to initialize the chart in the then clause of the axios request, which ensures that my instances aren't empty.

Here's the snippet that worked:

axios({

  method: 'post',

  url: 'url_to_api',

  headers: {

    'Content-Type' : 'application/json'

     // custom data headers, etc.

  },

  data: {

    // data to be sent

  }

})

.then(response => {

  this.weight_dates = response.data.weight_date;

  this.weight_data = response.data.weight_data;



  //   code for chart here

})

.catch(error => {

  console.log(error)

})