Как использовать обновленные данные в моем графике приложения Angular после выполнения http-вызова и использования цикла for?

Я использую angular2-highcharts, но я не думаю, что эта проблема специфична для него.

Проблема, с которой я сталкиваюсь, заключается в том, что диаграмма отображается с пустым массивом до того, как она будет обновлена ​​новыми данными. В конечном итоге я хочу использовать событие щелчка, чтобы обновить testArray с помощью вызова API и запустить диалоговое окно, содержащее компонент диаграммы, показывающий эти данные. Итак, мне нужно, чтобы все это происходило как-то синхронно или использовало наблюдаемое для ожидания данных?

Шаблон:

<chart type="StockChart" [options]="options"></chart>

Машинопись:

testArray = []
options: Object;

httpCall():Observable<any>{
  return this._http.get(httpUrl, options)
      .map((res:Response)=> res.json()
)};

updateArray(){
  this.httpCall()
    .subscribe(res =>{
        for (let data of res.data){ 
           this.testArray.push([
                 Date.parse(data['date']), 
                 parseInt(data['value'])
           ])
        }
    })
};
// This is for chart:
makeGraph(){
  this.options = {
            series: [{
                      type: 'column',
                      data: this.testArray,
                    }]
  } 
}

Любая помощь будет отличной