Chartjs-Line graph in Angular 7 not working – is data type proper?

by

0👍

✅

I modified the code as: 

this.httpClient.get(this.url).subscribe((res: any) => {
      console.log("Array result is ==>", res); // Data is coming

      let yearArray = [];
      let priceArray = [];

      let year = this.year;
      let price = this.price;
      res.results.map((data: any, key) => {

        this.year.push(data.year);
        this.price.push(data.price);
        console.log("Year data is ==>", this.year, "Price data is ==>", this.price); // here 
      })
      this.chart = new Chart('canvas', {
        type: 'line',
        data: {
          labels: this.year,
          datasets: [
            {
              data: this.price,
              borderColor: '#0076CE',
              fill: false
            }
          ]
        },
        options: {
          legend: {
            display: true
          },
          scales: {
            xAxes: [{
              display: true
            }],
            yAxes: [{
              display: true
            }]
          }
        }
      });
    });

0👍

I always use one array for my labels and one array for my data.
Readability and debugging is better.

let yearArray = []
let priceArray = []

for(let key in results){
  yearArray.push(results[key].year)
  priceArray.push(results[key].price)
}

this.chart = new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
        labels: yearArray,
        datasets: [{
            data: priceArray,
            borderColor: '#0076CE',
            fill: false
        }]
    },
    options: {}
});

Everything works fine this way.

Leave a comment