[Chartjs]-Using data from API with Chart JS

by

0👍

✅

When are you calling the buildStockChart() method?

You should call it right after the for loop into the callback you pass to the subscribe method, since that’s the moment when this.stockOpen is populated (before that moment it will be empty as you are seeing in the console).

3👍

i also have same problem with chart JS on angular so i force to use another chart.
im now using angular 2 chart js.

i think the problem here is the delay of data fetch by API, the CHART component is already render on html view but the data is still not fetch by the API service.

try to add this code on your code block. This will handle the data if API service data is available.
()=>{this.buildStockChart();}

 this.stocksService.getStockData()
      .subscribe(
        (response) => {
          for(var i = 0; i < response.length; i++) {
            this.stockOpen.push(response[i]['open']);
          }
          console.log('after loop: ', this.stockOpen);
        },
        ()=>{
        this.buildStockChart();
        }
      );
      console.log('real: ', this.stockOpen);
      console.log('test: ', this.testData);
  }

This chart is easy to manage for dynamic instances.

Hope this chart will work on you.

https://www.npmjs.com/package/angular2-chartjs

0👍

As @Joseph Agbing, I was unable to get it work with angular 7. I’m now using chart.js only 

npm install chart.js --save

with into my someChart.component.html

<div style="display: block"><!--Mandatory div including chart-->
<canvas id="canvas">{{chart}}</canvas>
</div>

into my someChart.component.ts

called from my httpClient.post(...).subscribe(lData => (setChartDataFromEntities(lDataProcessed), ...)

import { Chart } from 'chart.js';

export class someClass {

/**
* 
* @param aDate 
* @param aChargeUnitArray 
*/
setChartDataFromEntities( aDate: Date, aChargeUnitArray: ChargeUnit[] ){
    console.debug('setChartDataFromEntities->', aChargeUnitArray)
    let lChartDataArray = []
    let lChartDataLineDataArray: Array<Number> = []
    let lChartLabelsArray: string[] = []
    let l_s: string
    aChargeUnitArray.forEach(element => {
        lChartDataLineDataArray.push(element.charge)
        lChartLabelsArray.push(MiscHelper.dateTimeHMSForChart(element.timestamp))
    });
    lChartDataArray.push(
        {
            data: lChartDataLineDataArray,
            label: MiscHelper.dateForGui(aDate),
        }
    )

    this.chart = new Chart('canvas', {
    type: 'line',
    data: {
        labels: lChartLabelsArray,
        datasets: lChartDataArray
    },
    options: {
        legend: {
            display: false
        },
        scales: {
        xAxes: [{
            display: true
        }],
        yAxes: [{
            display: true
        }],
        }
    }
    });    

    this.statusMessage = 'Chart loaded'
}

hope it helps somebody more than the day I wasted trying to get it work…

Leave a comment