423,335 Members | 1,149 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,335 IT Pros & Developers. It's quick & easy.

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

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


Expand|Select|Wrap|Line Numbers
  1. export class DashboardComponent implements OnInit {
  2. //api having some data
  3. phones =  this.http.get('http://localhost:7788/countphones').map(res => res.json())
  4. laptops =  this.http.get('http://localhost:7788/countlaptops').map(res => res.json())
  5. televisions =  this.http.get('http://localhost:7788/counttelevisions').map(res => res.json())
  6.   constructor(private http:Http) { }
  7.  
  8.   ngOnInit() {
  9. Observable
  10.     .forkJoin(this.phones, this.laptops, this.televisions)
  11.     .subscribe(([phones, laptops, televisions])=>{
  12.         this.phones = phones;   //some data 
  13.         this.laptops = laptops; //some data
  14.         this.televisions = televisions; //some data
  15.  
  16.   }); 
  17.   }
  18.   chart = new Chart({
  19.       chart: {type: 'bar'},
  20.       title: {text: 'Product Charts'},
  21.       xAxis :{
  22.      categories: ['Televisions', 'phones', 'Laptops'],
  23.                 title: {  text: 'Product Names',},
  24.             },
  25.       yAxis : {
  26.                title: {text: 'Product (Quantity)',},
  27.             },
  28.       credits: {enabled: false},
  29.       series: [{
  30.         name: 'Line 1',
  31.         data: [['TELEVISIONS',//bind here api data], ['PHONES',//bind here api data ], ['LAPTOPS',//bind data here ]]
  32.       }]
  33.     });

more explanation in image
Attached Images
File Type: jpg Screenshot (2).jpg (46.9 KB, 60 views)
Feb 26 '18 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.