I'm currently working on a project that involves using the GoogleChart. However, I've encountered an issue where only one chart is being created instead of the expected four instances of the GoogleChart. I'm not sure why this is happening as there are four elements in the GoogleChart. It's puzzling why only one chart is being generated when it should be four.
Here is my code snippet:
profile-component.html:
<h2>Employee's Attendance Profile:</h2>
<div *ngFor="let member of chartObject; let i=index" >
<div class="col-md-6"
[chartData]="member.data" id="i"
[chartOptions] = "member.options"
chartType="PieChart"
GoogleChart>
</div>
</div>
profile-component.ts:
import { Component, OnInit, HostBinding, Input } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { slideInDownAnimation } from '../../animations/animations'
import { GoogleChart} from'../../../../directives/angular2-google-chart.directive';
import { ProfileService } from '../../services/profile-component.service';
declare var bootbox: any;
@Component({
selector: 'profile-component2',
templateUrl: `../app/modules/dashboard/dashComponents/profileComponents/profile.component.html`,
animations: [slideInDownAnimation],
styles: [`
.chart-css{
height:400px;width:400px;border:0px solid red;flot:left;
}
`]
})
export class ProfileComponent2 implements OnInit {
constructor(private profileService: ProfileService) { }
name = "Shubham";
message: string;
@HostBinding('@routeAnimation') routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
public login: {} = {};
private interval: any;
private members: any;
private totalMemberWithLeaves: number;
public chartObject = new Array<any>();
ngOnInit() {
console.log("profile/Home component2 initialized");
this.getAttendanceDetails();
}
getAttendanceDetails() {
this.profileService.getAttendanceDetails().subscribe(
(res) => {
let totalMembersId = [];
this.members = res.json();
this.members.filter((element: any) => {
if(totalMembersId.indexOf(element.userId) == -1)
totalMembersId.push(element.userId);
});
this.totalMemberWithLeaves=totalMembersId.length;
console.log("Total Member with leaves: ", this.totalMemberWithLeaves);
totalMembersId.forEach((element: any) => {
let chartDataforEachMembers = new Array<any>();
let Task = ['Task', 'Hours per Day'];
let present =['Present', 12];
let earnedLeaves = ['Earned Leaves', 23];
let Unplanned = ['Unplanned Leaves', 2];
chartDataforEachMembers.push(Task,present,earnedLeaves,Unplanned);
let memberObject={data :[Task,present,earnedLeaves,Unplanned],
options:{
title: element,
width: element+500,
height: element+500
}};
this.chartObject.push(memberObject);
});
console.log("chartObject : ",this.chartObject);
}, (err) => {
bootbox.alert("Error");
}
)
}
}
Within my chartObject, there are four objects included. I have attached snapshots for better clarification. Any suggestions or feedback on where I might be going wrong would be greatly appreciated.
Snapshots: