CODEWITHSUNDEEP
javascriptangulartypescriptchart.jsionic3
definho
definho

Reputation: 37

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

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);
  }
}

Upvotes: 1

Views: 2568

Answers (1)

Sampath
Sampath

Reputation: 65988

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,
                     }
                 ]
             }
         });
       }
   });
  }

Upvotes: 1

Related Questions