Ionic 3 + Angular 4 + chart.js - loading data from array

Question

So this is my code in "graf.ts", all I want to do is to show "array" that is array of floats in a chart.js graph, it works when I use "this.testni" in chart "data", but it's not working when I use "this.array" as it is in a code bellow when I console.log this.array it shows normal array that should work. Also it works under labels - labels: this.lista_valuta. Thanks!

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HnbProvider } from '../../providers/hnb/hnb';
import { Chart } from 'chart.js';
import { ViewChild } from '@angular/core';


@Component({
  selector: 'page-graf',
  templateUrl: 'graf.html'
})
export class GrafPage {
  @ViewChild('lineCanvas') lineCanvas;

  barChart: any;

  tecaj: any;
  lista_valuta: string[] =[
    "AUD", "CAD", "CZK", "DKK", "HUF",
    "JPY", "NOK", "SEK", "CHF", "GBP",
    "USD", "EUR", "PLN"
  ];
  array = [];
  testni = [1, 2, 3, 4];

  datum_poc: Date;
  datum_kraj: Date;
  o_valuta: string;

  constructor(
    public navCtrl: NavController,
    private hnbProvider:HnbProvider
  ) {
  }

  ionViewDidLoad() {
  }


  dobavi_podatke(datum_poc: Date, datum_kraj: Date, o_valuta: string){
    this.hnbProvider.getTecajRazdoblje(datum_poc, datum_kraj).subscribe(tecaj => {
      this.tecaj = tecaj;
     });

     var i = 0;
     for (var key in this.tecaj) {
       if (this.tecaj[key].valuta == this.o_valuta){
        this.array[i] = this.tecaj[key].srednji_tecaj;
        i++;
       }   
     }
     this.array.forEach(element => {
      console.log(element);
     });

     this.lineChart = new Chart(this.lineCanvas.nativeElement, 
      {
                 type: 'line',
                 data: {
                     labels: this.lista_valuta,
                     datasets: [
                         {
                             label: "My First dataset",
                             fill: false,
                             lineTension: 0.1,
                             backgroundColor: "rgba(75,192,192,0.4)",
                             borderColor: "rgba(75,192,192,1)",
                             borderCapStyle: 'butt',
                             borderDash: [],
                             borderDashOffset: 0.0,
                             borderJoinStyle: 'miter',
                             pointBorderColor: "rgba(75,192,192,1)",
                             pointBackgroundColor: "#fff",
                             pointBorderWidth: 1,
                             pointHoverRadius: 5,
                             pointHoverBackgroundColor: "rgba(75,192,192,1)",
                             pointHoverBorderColor: "rgba(220,220,220,1)",
                             pointHoverBorderWidth: 2,
                             pointRadius: 1,
                             pointHitRadius: 10,
                             data:this.array,
                             spanGaps: false,
                         }
                     ]
                 }
             });
     //console.log(this.tecaj);
  }
}

did you try replaced this.array[i] = by this.array.push( this.tecaj[key].srednji_tecaj). And do you see the logs from : this.array.forEach ? — Walfrat
– Walfrat, Commented Oct 31, 2017 at 15:25
I just tried it and it's doing the same thing except now I'm getting an error: "TypeError: Cannot read property 'skip' of undefined" and when I return back to my code it logs out numbers - here is screenshot [link]imgur.com/a/Qnfi4 — definho
– definho, Commented Oct 31, 2017 at 15:42

Sampath · Accepted Answer · 2017-10-31 16:38:44Z

1

The problem here is you use an async method getTecajRazdoblje(). But you're trying to fill the array sync way. So you need to correct that. Try this:

 this.hnbProvider.getTecajRazdoblje(datum_poc, datum_kraj).subscribe(tecaj => 
     {
       this.tecaj = tecaj;
       var i = 0;
       for (var key in this.tecaj) {
       if (this.tecaj[key].valuta == this.o_valuta){
        this.array[i] = this.tecaj[key].srednji_tecaj;
        i++;
       }   

      this.lineChart = new Chart(this.lineCanvas.nativeElement, 
       {
             type: 'line',
             data: {
                 labels: this.lista_valuta,
                 datasets: [
                     {
                         label: "My First dataset",
                         fill: false,
                         lineTension: 0.1,
                         backgroundColor: "rgba(75,192,192,0.4)",
                         borderColor: "rgba(75,192,192,1)",
                         borderCapStyle: 'butt',
                         borderDash: [],
                         borderDashOffset: 0.0,
                         borderJoinStyle: 'miter',
                         pointBorderColor: "rgba(75,192,192,1)",
                         pointBackgroundColor: "#fff",
                         pointBorderWidth: 1,
                         pointHoverRadius: 5,
                         pointHoverBackgroundColor: "rgba(75,192,192,1)",
                         pointHoverBorderColor: "rgba(220,220,220,1)",
                         pointHoverBorderWidth: 2,
                         pointRadius: 1,
                         pointHitRadius: 10,
                         data:this.array,
                         spanGaps: false,
                     }
                 ]
             }
         });
       }
   });
  }

edited Oct 31, 2017 at 16:38

answered Oct 31, 2017 at 15:47

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

definho Over a year ago

still not working. can it be due the slow api answer? because after my first call of function getTecajRazdoblje() on a button click, the console doesn't log anything, but second time i press it it logs the array as it should be EDIT: I made it so that now I have two buttons, one to fill array, and another to call function for graph drawing and still nothing

Sampath Over a year ago

See the update. You need to put everything inside the subscribe method.

definho Over a year ago

EDIT: OK it's done, it was due the wrong formatting of a numbers, the graph reads floats with "." so "7.5" and not with "," like "7,5"

Sampath Over a year ago

Is that mean it is working with your original code on your question too or with mine code?

Sampath Over a year ago

OK. It won't work with your code.Anyway Glad to hear that it worked :)

|

Collectives™ on Stack Overflow

Ionic 3 + Angular 4 + chart.js - loading data from array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related