CODEWITHSUNDEEP
angularchart.js
Chemox
Chemox

Reputation: 13

How to send data to chart js using angular

I have a little problem when I try to send data to chartJs using angular, I have this code :

   ngOnInit() {
       this.chart = new Chart("myChart", {
        // The type of chart we want to create
        type: 'bar',
        // The data for our dataset
        data: {
            labels: ["Turno"],
            datasets: [{
                label: "",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: []
            }]
        },
        // Configuration options go here
        options: {
          title: {
            display: true,
            text: 'Hora por Hora',
            fontSize: '15',
            fontColor: 'rgb(0,51,100)'
        },
        elements: {
          center: {
              text: '',
              color: 'rgb(0,51,100)', // Default is #000000
              fontStyle: 'Arial', // Default is Arial
              sidePadding: 20 // Defualt is 20 (as a percentage)
          }
      },
        }  
    });
    
    this.resultStorehora(0);
    
      }

resultStorehora(op: any){
    this.horaxhoraService.postresultChart(op).subscribe(data=>{
      this.resultadocharInit = data;

      var efiw1 = 0.0;
      var otro = 0;
      for(const item of this.resultadocharInit)
      {
        otro = item.resultado;
      }
       efiw1 = otro * 100;
      this.chart.data.datasets[0].data = [efiw1.toFixed(2)];
      this.chart.options.elements.center.text = efiw1.toFixed(2)+'%';
      this.chart.update();
    });
  }

Actually I can see the reponse in the Console and is correct, but I dont find how is the concat or how to send this result to chart js.

Upvotes: 1

Views: 842

Answers (2)

Chemox
Chemox

Reputation: 13

I resolve the problem with this :

resultStorehora(op: any){
    this.horaxhoraService.postresultChart(op).subscribe(data=>{
      this.storeResult = data;
      this.resultadocharInit = data[0];
       this.salida = 0.0;
      this.salida = this.resultadocharInit['Resultado'];
      console.log(this.salida);
      
      this.chart.data.datasets[0].data = [this.salida.toFixed(2),400];
      this.chart.options.elements.center.text = this.salida.toFixed(2)+'%';

      this.chart.update();

    });
  }

Upvotes: 0

uminder
uminder

Reputation: 26150

Your component class looks fine to me. To make it work, you also need to define a canvas inside the HTML template.

<canvas id="myChart" height="200"></canvas>

The link between the canvas and the new Chart() in the component class is the id, which in your case is "myChart".

But I agree with the comment from AliF50. Using ng2-charts in an Angular application is a better choice.

Upvotes: 1

Related Questions