How to add datas to chart js from my Array<number>? In Ionic3

Question

i'm trying to pass data from my Array to my chart, but the chart did not rendered the values. Appears withou data.

    import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Chart } from 'chart.js';
import { ConnectionServiceProvider } from './../../providers/connection-service/connection-service';
import { Product } from './../../models/Product';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('barCanvas') barCanvas;
  @ViewChild('doughnutCanvas') doughnutCanvas;
  @ViewChild('lineCanvas') lineCanvas;

  private quantidadeProdutos: Array<number>;
  private nomeProdutos: Array<any>;
  private produtos: Array<Product>;
  private nome: string;

  barChart: any;
  doughnutChart: any;
  lineChart: any;

  constructor(public navCtrl: NavController,  private connection : ConnectionServiceProvider) {
    this.nome = '';
    this.quantidadeProdutos = [];
    this.nomeProdutos = [];
    this.callLoadProducts();
    //console.log(this.produtos);

    //this.getQuantidadeNome();

    console.log('---------------------');
    console.log(this.quantidadeProdutos);
    console.log(this.nomeProdutos);


  }

  callLoadProducts() {
    this.connection.loadProducts(this.nome)
      .then( (data: Array<Product>) => {
        this.produtos = data;
        console.log(this.produtos);
        for(let p of this.produtos){
            this.quantidadeProdutos.push(p.price);
            this.nomeProdutos.push(p.label);   
            console.log(p.label);
        }
      }, (error) => {
        console.log("Ocorreu um erro", error);
      })
  }


  ionViewDidLoad() {

      this.barChart = new Chart(this.barCanvas.nativeElement, {

          type: 'bar',
          data: {
              labels: this.nomeProdutos,              
              datasets: [{
                  label: '# of Votes',
                  data: this.quantidadeProdutos,
                  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
                      }
                  }]
              }
          }

      });

      this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {

          type: 'doughnut',
          data: {
              labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
              datasets: [{
                  label: '# of Votes',
                  data: [12, 19, 3, 5, 2, 3],
                  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"
                  ]
              }]
          }

      });

      this.lineChart = new Chart(this.lineCanvas.nativeElement, {

          type: 'line',
          data: {
              labels: ["January", "February", "March", "April", "May", "June", "July"],
              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: [65, 59, 80, 81, 56, 55, 40],
                      spanGaps: false,
                  }
              ]
          }

      });

  }


}

I get the data in the method callLoadProducts(), after in constructot i print the values in cosole, and it's right! But when i pass to the chart (labels: this.nomeProdutos, data: this.quantidadeProdutos, ) nothing happen!

labels: this.nomeProdutos data: this.quantidadeProdutos,

ɢʀᴜɴᴛ · Accepted Answer · 2017-10-03 14:11:07Z

1

You have to update your chart (by calling the update() function), after populating the labels (this.nomeProdutos) and data (this.quantidadeProdutos) array.

So, after the for loop, call this.barChart.update() ..

...
callLoadProducts() {
   this.connection.loadProducts(this.nome).then((data: Array<Product>) => {
      this.produtos = data;
      console.log(this.produtos);
      for (let p of this.produtos) {
         this.quantidadeProdutos.push(p.price);
         this.nomeProdutos.push(p.label);
         console.log(p.label);
      }
      this.barChart.update(); //<- call this
   }, (error) => {
      console.log("Ocorreu um erro", error);
   })
}
...

answered Oct 3, 2017 at 14:11

ɢʀᴜɴᴛ

33k15 gold badges123 silver badges115 bronze badges

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

Collectives™ on Stack Overflow

How to add datas to chart js from my Array<number>? In Ionic3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related