'How to make charts with data from material table using ngx
Is there any way to send data from my material table to ngx-charts? I'm trying to build a chart, but I don't understand how to pass the data correctly. Or advise something else, not ngx-charts, so that I can send data from the material table to chart to show.
This is my HTML table
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="id_acid_oil">
<th class="column-width" mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let oilAcid"> {{oilAcid.id_acid_oil}}</td>
</ng-container>
<ng-container matColumnDef="id_oils">
<th class="column-width" mat-header-cell *matHeaderCellDef> ID масла </th>
<td mat-cell *matCellDef="let oilAcid"> {{oilAcid.id_oils}} </td>
</ng-container>
<ng-container matColumnDef="name_acids">
<th class="column-width" mat-header-cell *matHeaderCellDef> Название </th>
<td mat-cell *matCellDef="let oilAcid"> {{oilAcid.name_acids}} </td>
</ng-container>
<ng-container matColumnDef="acid_value">
<th mat-header-cell *matHeaderCellDef> Значение </th>
<td class="big-col" mat-cell *matCellDef="let oilAcid"> {{oilAcid.acid_value}}
</td>
</ng-container>
<ng-container matColumnDef="clean">
<th mat-header-cell *matHeaderCellDef> </th>
<td class="small-col"mat-cell *matCellDef="let oilAcid"></td>
</table>
That's how i made the Get request to receive data from server
public OilAcids: OilAcid[] = [];
public editOilAcids: OilAcid | undefined;
public deleteOilAcids: OilAcid | undefined;
displayedColumns: string[] = ['id_acid_oil', 'id_oils', 'name_acids', 'acid_value','clean'];
dataSource = new MatTableDataSource<OilAcid>();
ngOnInit() {
this.getOilAcid();
}
public getOilAcid(): void {
this.oilAcidService.getOilAcid().subscribe({
next: (response: OilAcid[]) => {
this.dataSource.data = response;
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
},
error: (error: HttpErrorResponse) => {
alert(error.message);
}
})
}
Sorry, i can't attach screenshot with table, but I will do what you ask, if necessary. Thank you in advance for your help.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
