Search code examples
javascriptangularangular5angular2-templatepie-chart

Make Pie Chart in Angular 5

How to make pie chart in Angular 5. I am hard coded data (data not from API) and want make pie chart in basis of expiration and lot satus. Below is my code

component.html

<ng-container matColumnDef="expiration">
  <mat-header-cell *matHeaderCellDef> Expiration </mat-header-cell>
  <mat-cell *matCellDef="let csvdata"> {{csvdata.expiration}} </mat-cell>
</ng-container>

<ng-container matColumnDef="lotstatus">
  <mat-header-cell *matHeaderCellDef> Lot Status </mat-header-cell>
  <mat-cell *matCellDef="let csvdata"> {{csvdata.lotstatus}} </mat-cell>
</ng-container>

component.ts

const ELEMENT_DATA: Element[] = [
  { type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '28/7/17', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
  { type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
  { type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
  { type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
  { type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
  { type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
  { type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
  { type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
  { type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
  { type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
  { type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
  { type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' }    
];
Solution

  • I suggest you to use D3js

    You can do a lot of charts. Like PieChart

    You can find here a tutorial: Create a Pie Chart with Dynamic Data Using D3.js & Angular 2