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 {
[B]//api having some data
[/B]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;   [B]//some data[/B] 
        this.laptops = laptops; [B][/B]//some data
        this.televisions = televisions; [B]//some data[/B]

  }); 
  }
  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',//[B]bind here api data[/B]], ['PHONES',//[B]bind here api data[/B] ], ['LAPTOPS',[B]//bind data here[/B] ]]
      }]
    });

more explanation in image