How do I properly display a chart in html canvas with Chart.js and Angular Framework - html

Question

I am following a tutorial to build a real time polling using angular. However, by the end of the tutorial, I am not able to display the chart like the tutorial does. What am I doing wrong?
I followed the tutorial, used angular, pusher, chart.js as instructed. It worked fine until I reached Data Visualization part, where I need to display the polling result on a 'Doughnut' chart. All I have is a white line which is used to divide different color of the dataset, but the rest of the chart is not displaying.
My app.component.ts
voteCount = {
salah: 0,
kane: 0,
eriksen: 0,
kevin: 0,
};
castVote(player) {
this.http
.post(`http://localhost:4000/vote`, { player })
.subscribe((res: any) => {
this.vote = res.player;
this.voted = true;
});
}
getVoteClasses(player) {
return {
elect: this.voted && this.vote === player,
lost: this.voted && this.vote !== player,
};
}
chartLabels: string[] = Object.keys(this.voteCount);
chartData: number[] = Object.values(this.voteCount);
chartType = 'doughnut';
ngOnInit() {
const channel = this.pusher.init();
channel.bind('vote', ({player}) => {
this.voteCount[player] += 1;
this.chartData = Object.values(this.voteCount);
});
}
My app.component.html
<div class="chart-box" *ngIf="voted">
<h2>How others voted</h2>
<canvas
baseChart
[data]="chartData"
[labels]="chartLabels"
[chartType]="chartType"
>
</canvas>
</div>
According to the tutorial, the data visualization should look like this:
However, mine looks like this:
I changed the background color of the div, so you can see there is a white line below Eriksen just like the tutorial, however, the rest of the data is not shown.
Edit: I hard-coded some data and assigned them to chartLabels, chartData and chartType, and now the canvas can visualize them:
chartLabels = ['salah', 'kane', 'eriksen', 'kevin'];
chartData = [120, 150, 180, 90];
chartType = 'doughnut';
So this means
chartLabels: string[] = Object.keys(this.voteCount);
chartData: number[] = Object.values(this.voteCount);
chartType = 'doughnut';
are not receiving any data. Why is that?
Edit 2:
After further experiment, I found that
ngOnInit() {
const channel = this.pusher.init();
channel.bind('vote', ({player}) => {
this.voteCount[player] += 1;
this.chartData = Object.values(this.voteCount);
});
}
Object.values(this.voteCount) is not increased so its value stays at 0, so that's why the chart is empty. How do I increase its value each time I click on the player's pic?