Mean stack angular 2.bind api data to high chart in typescript.

[golubhaiya]

i want to binde api data so it can render highchart according to data in angular 2 and typescript.

export class DashboardComponent implements OnInit {
 //api having some data
 phones =  this.http.get('http://localhost:7788/countphones').map(res => res.json())
laptops =  this.http.get('http://localhost:7788/countlaptops').map(res => res.json())
televisions =  this.http.get('http://localhost:7788/counttelevisions').map(res => res.json())
  constructor(private http:Http) { }
 
  ngOnInit() {
Observable
    .forkJoin(this.phones, this.laptops, this.televisions)
    .subscribe(([phones, laptops, televisions])=>{
        this.phones = phones;   //some data 
        this.laptops = laptops; //some data
        this.televisions = televisions; //some data
 
  }); 
  }
  chart = new Chart({
      chart: {type: 'bar'},
      title: {text: 'Product Charts'},
      xAxis :{
     categories: ['Televisions', 'phones', 'Laptops'],
                title: {  text: 'Product Names',},
            },
      yAxis : {
               title: {text: 'Product (Quantity)',},
            },
      credits: {enabled: false},
      series: [{
        name: 'Line 1',
        data: [['TELEVISIONS',//bind here api data], ['PHONES',//bind here api data ], ['LAPTOPS',//bind data here ]]
      }]
    });

more explanation in image