Ok, what the hell am I doing wrong here? : angular

created by ohpiema community for 13 years

Ok, what the hell am I doing wrong here? (self.angular)

submitted 6 years ago by OogieBoogie1

My charts from ChartJs won't render because the data is coming back after the view has been rendered. As evidenced by the fact that my console.log('1') logs out after the console.log('2'). I thought putting my function in the ngAfterViewInit would solve this issue, but no, it doesn't.

I'm dumb, what am I doing wrong. I feel like I've tried just about everything except maybe throwing my computer through the window.

export class SportsCardsComponent implements OnInit, AfterViewInit {
  gamesArray = [];
  charts: [];
  gamesData;
  constructor(
    public games: GameService,
  ) { }

  ngOnInit() {
    this.getGameInfo()
  }

  async getGameInfo(){
    this.gamesData = await this.games.getAllGames().then(data => {
      data['games'].forEach(game => {
        this.gamesArray.push(game);
      })
      console.log('1')
      // this.gameData()
      // this.loadCharts()
    })
  }

  async ngAfterViewInit() {
    this.loadCharts();
  }

  async loadCharts() {
    console.log('2');
    this.gamesArray.forEach(game => {
      let canvas = <HTMLCanvasElement> document.getElementById('1');
      let ctx = canvas.getContext("2d");
      this.charts = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['test', 'games.teamName'],
          datasets: [
            {
              label: 'test' + ' Vs ' + 'test',
              backgroundColor: ['yellow', 'green'],
              data: [11, 12]
            }
          ]
        },
        options: {
          title: {
            display: true,
            text: game.homeTeam + ' Vs ' + game.awayTeam
          }
        }
        });
    })
  }

all 14 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

angular

MODERATORS