2

I am using angular2-highcharts but I don't think this issue is specific to it.

The issue I am having is that the chart is rendered with an empty array before it is updated with the new data. I eventually want to use a click event to have testArray updated with the API call and launch a dialog-box containing a chart component showing that data. So I need it all to happen synchronously somehow or use an observable to wait for the data?

Template:

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

Typescript:

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,
                    }]
  } 
}

Any help would be great

Nicholas
  • 1,113
  • 3
  • 14
  • 33

1 Answers1

1

You should look into router data resolvers. I wrote up about them in a question regarding doing something like this in an Ionic way.

This should give you a roadmap for how to implement them yourself.

(Ionic uses Angular under the covers but doesn't use router, rather a navigation controller - which just got changed around again to something else).

If you need more details, I learnt about this stuff in Angular University in their:

Specifically this stuff gets covered between the course subjects of:

  • Switch Branches Router Data Pre-fetching and Loading Indicator, and
  • Implementing a Router Loading Indicator

The source material is on Github too. You have to know which branches to checkout from the videos and follow along to get the code you need.

JGFMK
  • 8,425
  • 4
  • 58
  • 92
  • Thanks for this. I will go over the material and post a specific answer once i figure it out – Nicholas Jul 16 '17 at 09:25
  • This type of solution prevents page displaying until all the data is returned which seems to coincide with your problem. You can do things like have a page loading indicator on the current page and transition once the data is 'resolved'. Like a cog animated GIF... – JGFMK Jul 16 '17 at 09:30
  • Ok great, im planning to have the graph in a dialog box so this should work fine with a loading indicator – Nicholas Jul 16 '17 at 09:35