javascript - Displaying REST API data on Charts using ionic -

i new angular , ionic. able display static data on charts. cannot figure out how display data on rest api using charts. following code have. not sure on how integrate data api charts since data being displayed on charts not inputed in html file. if were, enter data using {{}}. however, since data being displayed in ".ts" file.this see: chart , list of api data

home.html

<ion-header>    <ion-navbar>      <ion-title>        ionic blank      </ion-title>    </ion-navbar>  </ion-header>    <ion-content padding>   <chart [options]="chartoptions" style ="display: block" type="chart"></chart>    <br>      <ion-list>      <ion-item  *ngfor="let message of messagelist"> {{message.date}} , {{message.message}}</ion-item>    </ion-list>  </ion-content>

home.ts

import { component } '@angular/core'; import { navcontroller } 'ionic-angular'; import {messageserviceprovider} '../../providers/message-service/message-service';  @component({   selector: 'page-home',   templateurl: 'home.html' }) export class homepage {     chartoptions: any;   constructor(public navctrl: navcontroller, private messageserviceprovider:messageserviceprovider) {      this.getmessages();      this.chartoptions={       chart: {         type: 'bar'       },       title: {         text: 'fruit consumption'       },       xaxis: {         categories: ['apples', 'bananas', 'oranges']       },       yaxis: {         title: {           text: 'fruit eaten'         }       },       series: [{         name: 'jane',         data: [1, 0, 4]       }, {         name: 'john',         data: [5, 7, 3]       }]     }   }    messagelist=[];      getmessages(){     this.messageserviceprovider.getmessages().subscribe(data => this.messagelist=data.items);   }  } 

message-service.ts

import { injectable } '@angular/core'; import { http, response } '@angular/http'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/do'; import 'rxjs/add/operator/catch'; import {observable} 'rxjs/observable';  @injectable() export class messageserviceprovider {   private url:string="https://p3ddibjuc6.execute-api.us-west-2.amazonaws.com/prod/entries";   constructor(public http: http) {     console.log('hello messageserviceprovider provider');   }    getmessages(){     return  this.http.get(this.url)       .do(this.logresponse)       .map(this.extractdata)       .catch(this.catcherror);   }    private catcherror(error:response){     console.log(error);     return observable.throw(error.json().error || "server error");   }   private  logresponse(res: response){     console.log(res);   }    private extractdata(res: response){     return res.json();   } }