Angular-highcharts pushing data from api into highchart option

Question

I got following data (https://api.coindesk.com/v1/bpi/historical/close.json):

{
   bpi: {
   2017-12-15: 17601.9438,
   2017-12-16: 19343.04,
   2017-12-17: 19086.6438,
   2017-12-18: 18960.5225,
   ...
}

I use this library to visualize my line chart: https://github.com/cebor/angular-highcharts

I tried to push the above data into the highcharts option, but nothing showed up without any errors. Therefore, I doubt my pushing method that needs someone give advice.

Here is the code:

export class ChartComponent implements OnInit {

  stockChart: StockChart;
  historyData = [];

  constructor(private apiService: ApiService) {
    this.apiService.getBtcData()
    .subscribe((data) => {
      this.historyData = Object.values(data.bpi);
      console.log(this.historyData);
    });
   }

  ngOnInit() {
    this.stockChart = new StockChart({
       series: [{
          tooltip: {
            valueDecimals: 2
          },
          marker: {
            enabled: false
          },
          name: 'BTC/USD',
          data: this.historyData
        }]
    }) 
  }
}

LLai · Accepted Answer · 2018-01-16 15:22:40Z

3

historyData is not defined when you are initializing the chart data in your ngOnInit, so your chart has no data. You should instead initialize your chart within your subscribe (after historyData is defined)

this.apiService.getBtcData()
    .subscribe((data) => {
        this.historyData = Object.values(data.bpi);

        this.stockChart = new StockChart(...);
    });

or set the data through the highcharts setData method and redraw the chart

this.apiService.getBtcData()
    .subscribe((data) => {
        this.historyData = Object.values(data.bpi);
        // assign chart data and redraw (2nd parameter of setData)
        this.stockChart.ref.series[0].setData(this.historyData, true);
    });

answered Jan 16, 2018 at 15:22

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hoàng Nguyễn Over a year ago

It's true, I will try again. Thank you

Collectives™ on Stack Overflow

Angular-highcharts pushing data from api into highchart option

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related