How to send data to chart js using angular

Question

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.

valor-software.com/ng2-charts/#/GeneralInfo I would use the ng2-charts npm package that wraps chart.js in an Angular way. — AliF50
– AliF50, Commented Feb 10, 2021 at 18:14

uminder · Accepted Answer · 2021-02-12 15:32:05Z

1

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.

answered Feb 12, 2021 at 15:32

uminder

26.4k6 gold badges45 silver badges91 bronze badges

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

Comments

Chemox · Accepted Answer · 2021-02-12 21:19:46Z

0

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

    });
  }

answered Feb 12, 2021 at 21:19

Chemox

133 bronze badges

Collectives™ on Stack Overflow

How to send data to chart js using angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related