How show chart ng2-chart from database? - html

Question

Excuse me, i am newbie in angular, i have chart with static data,and how to show chart with ng2-chart where data is taken from databse / sql?
html :
<div>
<div style="display: block">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
<button (click)="randomize()">Update</button>
</div>
typescript :
export class BarChartDemoComponent {
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[] = [
{data: [165, 159, 180, 181, 156, 155, 140], label: 'Maba'},
{data: [128, 148, 140, 119, 86, 127, 90], label: 'Alumni'}
];
}

Answer 1

You need to group the data and create the graph accordingly,
export class DashboardComponent implements OnInit {
#ViewChild(BaseChartDirective) private _chart;
lineChartLabels: String[] = [];
fromDate: NgbDateStruct;
toDate: NgbDateStruct;
role: string;
datasets: any[];
public lineChartOptions: any = {
animation: false,
responsive: true
};
public lineChartLegend = true;
public lineChartType = 'line';
constructor() { }
ngOnInit() {
this.datasets = [{ data: [] }];
}
forceChartRefresh() {
setTimeout(() => {
this._chart.refresh();
}, 10);
}
getChartDetails() {
this.lineChartLabels = [];
this.datasets = [];
this._reportService.getChartInfo(yourApi).subscribe((response) => {
const grouped = response.lstBalances.map(function (o) {
return {
data: o.AccountBalanceOnMonth.map(function (p) { return +p.year; }),
label: o.totalAlumni
};
});
this.buildchart(grouped, response.lstYears);
});
}
buildchart(data: any, labels: any) {
this.datasets = data;
for (const label of labels) {
this.lineChartLabels.push(label);
}
this.datasets = this.datasets.slice();
this.forceChartRefresh();
}
}