Display chart with values from json object (ionic2)

Ionic Framework ionic-v3
1

i want to dsiplay chart that obtains data from the result of a json object ( the result of a web service ) . the json object is well done , when i’m running i obtain that error

image

below is my type script file :

import { Component,ViewChild } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Chart } from 'chart.js';
import {Http} from "@angular/http";
import {VoitureService} from '../../providers/voitureservice';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
  providers:[VoitureService]

})
export class SettingsPage {
      @ViewChild('barCanvas') barCanvas;
    @ViewChild('doughnutCanvas') doughnutCanvas;
   // @ViewChild('lineCanvas') lineCanvas;
 
    barChart: any;
    doughnutChart: any;
    //lineChart: any;
    items:Array<any>;
 
    constructor(public navCtrl: NavController,public voitureservice: VoitureService,public http:Http) {

    }
    
   

 
    ionViewDidLoad() {

         
                          this.voitureservice.getStatistique().subscribe(response=>
                              {  this.items=response.NombreV;

                                 for (var i = 0, length = this.items.length; i<length; i++) {

                                  let  dataga = this.items[0]; 
                                    let  datak = this.items[1];                                      
                                    let  datata = this.items[2];
                                    let  datato = this.items[3];  
                                    let  datatu = this.items[4];
                                    let  datas = this.items[5]; 
                                    let  datag = this.items[6];   
                                    let  datan = this.items[7];
                                          let  ga = dataga.nombre;
                                             let  k = datak.nombre;                   
                                             let  ta = datata.nombre;
                                             let  to = datato.nombre; 
                                             let  tu = datatu.nombre; 
                                             let  s = datas.nombre; 
                                             let  g = datag.nombre;  
                                             let  n = datan.nombre;            
       
        
                   
                      
        this.barChart = new Chart(this.barCanvas.nativeElement, {
 
            type: 'bar',
            data: {
                labels: ["s_t","s_n","s_sou","s_kair","s_gas"],
                datasets: [{
                    label: ' nombre de voitures 1',
                    data: [tu.valueOf(),n.valueOf(),s.valueOf(),k.valueOf(),ga.valueOf()],
                    
                    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)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                   
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            //endAtTwenty:true,
                            //donut: true,
                           //showLabel: false
                        }
                    }]
                }
            }
 
        });
 
     this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
 
            type: 'doughnut',
            data: {
                labels: ["s_touz","s_gab","s_tat"],
                datasets: [{
                    label: '# of Votes',
                    data: [to.valueOf(),g.valueOf(),ta.valueOf()],
                    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)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56",
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
            }
 
        });
 
 
                                 }
                                    });
 
    }
}

please how to fix the error ?

2
  • Don’t abuse any in this fashion. Define interfaces and use them.
  • Don’t declare providers in components unless you are absolutely certain of why you want to, and I don’t believe you are.
  • Do initialize items to [].
  • Do program defensively, because there are many cases where you are blindly assuming that something has a nombre property, and clearly that’s not always the case.
3

this is a example of a json array :

{“NombreV”:[{“villearrive”:“ABV”,“nombre”:“2”}],“success”:1}

4

It looks like an element of this.items is undefined.
Please ensure the this.items.length>-8 and have values.