How to use json data in chart.js in an ionic app - json

Question

I would like to implement chart.js, I followed the example HERE, it worked well with a sample array data, but now I want to put live data fetch in json format from my server, I could not get a head way.
this is my html page
<ion-header>
<ion-navbar>
<ion-title>results</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card >
<ion-card-header>
Bar Chart
</ion-card-header>
<ion-card-content>
<canvas width="800" height="800" #barCanvas></canvas>
</ion-card-content>
</ion-card>
</ion-content>
and my .ts page
import { Component, ViewChild } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Chart } from 'chart.js';
import { LoadingController, AlertController } from 'ionic-angular';
import {Http, Headers, RequestOptions} from "#angular/http";
import 'rxjs/add/operator/map';
#IonicPage()
#Component({
selector: 'page-results',
templateUrl: 'results.html',
})
export class ResultsPage {
#ViewChild('barCanvas') barCanvas;
barChart: any;
selectedOption:any;
items:any;
val : any=[];
val2 : any=[];
constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public loading: LoadingController,
public alertCtrl: AlertController) {
}
ionViewDidLoad() {
this.selectedOption = this.navParams.get('options');
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
let options = new RequestOptions({ headers: headers });
let data = {
option: this.selectedOption
};
let loader = this.loading.create({
content: 'Processing please wait...',
});
loader.present().then(() => {
this.http.post('mydomain/fetch_data.php',data, options)
.map(res => res.json())
.subscribe(res => {
loader.dismiss()
this.items=res.server_response;
console.log(this.items);
this.items.map((item)=>{
this.val1.push(item.options);
});
this.items.map((item)=>{
this.val2.push(item.result);
});
});
});
this.showChart();
}
showChart(){
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: 'bar',
data: {
labels: this.val1,
datasets: [{
label: '# of Votes',
data: this.val2,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
I got json data but to convert it to another array like labels: ["Red", "Brown", "Blue", "Yellow", "Green", "Purple", "Orange"], and data: [11, 15, 22, 4, 6, 2, 3] such that I can use it as val1 and val2 as shown above is my challenge.
Thank you in advance

Answer 1

First you install ng2-charts, and import { ChartsModule } from 'ng2-charts'; to app/app.module.ts
in example.html
<div style="display: block; color:white; responsive: true;
maintainAspectRatio: false;">
<canvas baseChart
height="350"
[colors]="chartColors"
[labels]="doughnutChartLabels"
[data]="doughnutChartData"
[chartType]="doughnutChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
in example.ts
export class ExamplePage {
doughnutChartLabels: string[] = [];
doughnutChartData: number[] = [];
doughnutChartType: string = 'pie';
checkChart : boolean;
...}
pushItem(){
#pushed your json data in doughnutChartData
#end called this fonction in ionViewDidLoad and any methods
}
public chartClicked(e:any):void {
#...
}
public chartHovered(e:any):void {
#...
}