0

I have this component

<div class="grafica">
  <google-chart #chart [title]="title" [type]="type" [data]="data" [options]="options" [width]="800" [height]="500">
  </google-chart>
</div>

import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';

@Component({
  selector: 'app-grafica',
  templateUrl: './grafica.component.html',
  styleUrls: ['./grafica.component.scss']
})
export class GraficaComponent implements OnInit, OnChanges {
  @Input() title: string;
  @Input() type: string;
  @Input() data: any[][];

  options: any;


  constructor() { }
  ngOnChanges(changes: SimpleChanges): void {
    console.log('GraficaComponent-ngOnChanges-data', this.data);
  }


ngOnInit(): void {

this.options = {
  hAxis: {
    title: 'AƱos',
  },
  vAxis: {
    minValue: 0,
  },
  legend: { position: 'top' },
};
}
}

And I use it inside another component

....
<app-grafica [title]="'Ofertas Presentadas y Adjudicadas'" [type]="'ColumnChart'"
    [data]="dataPorcentajeAdjudicadas"></app-grafica>

<app-grafica [title]="'Costes y Horas'" [type]="'ColumnChart'"   [data]="dataHorasCostesOfertas"></app-grafica>

When debugging I see that the correct data arrives separately to the graphic component

enter image description here

But only the first set of data is represented well to me

enter image description here

The second one does this to me

enter image description here

Any idea, please?

Thanks

kintela
  • 1,283
  • 1
  • 14
  • 32

0 Answers0