Angular 8 + PrimeNG Tutorial - Implement Various Charts








PrimeNG Tutorial - Implement Various Charts


Overview

In this tutorial we will be implementing the various chart types available using PrimeNG. We will be modifying the Hello World Angular PrimeNG project we had created previously.

Technology Stack

We will be making use of-
  • Angular 8
  • PrimeNG
  • ChartJS

Table Of Contents :


We will be implementing the following diagrams-
  • Pie Chart is a chart to show data as Pie slices. Suppose we want to survey employees work for which organizations
    Organization 1 Organization 2 Organization 3 Organization 4 Organization 5
    15 30 20 35 40


  • Donut Chart is a variation on a Pie chart. In Donat chart there is a hole in the center.

  • Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.

  • Bar Graph (also called Bar Chart) is a graphical display of data using bars of different heights. Imagine you just did a survey of your friends to find which kind of movie they liked best:

  • Line Graph a graph that shows information that is connected in some way (such as change over time)

  • Radar Chart also called as Spider Chart, Radial Chart or Web Chart, is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

Implementation

Set for PrimeNg Chart

Install chart library    
install chart.js --save

Install Chart JS for Angular
Next we will include the chart js file in angular.json file.    
   {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "library-management": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/library-management",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/themes/nova-light/theme.css",
              "./node_modules/primeng/resources/primeng.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/chart.js/dist/Chart.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "library-management:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "library-management:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "library-management:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "library-management:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "library-management:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "library-management"
}

Implement the chart types

Adding the PrimeNG Component in Angular Application

For adding any PrimeNG Component in Angular we will be following below steps-
Add PrimeNG Component
Include the chart component in app.module.ts -    
   import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloworldComponent } from './helloworld/helloworld.component';
import { DropdownModule } from 'primeng/dropdown';
import { PanelModule, ChartModule } from 'primeng/primeng';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent,
    HelloworldComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DropdownModule,
    FormsModule,
    BrowserAnimationsModule,
    ChartModule,
    PanelModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Create Backing Data in helloworld.component.ts -    
import { Component, OnInit } from '@angular/core';

interface Book {
  name: string;
  author: string;
}

@Component({
  selector: 'app-helloworld',
  templateUrl: './helloworld.component.html',
  styleUrls: ['./helloworld.component.css']
})
export class HelloworldComponent implements OnInit {

  employeeOrgData; orgCount1;
  orgCount2; orgCount3; orgCount4; orgCount5; employeeLabel: any;
  employeeJIRAHoursData;

  
  employeeOrganizationData = [
    { name: 'employee1', designation: 'manager', employer: 'organization1' },
    { name: 'employee2', designation: 'manager', employer: 'organization1' },
    { name: 'employee3', designation: 'manager', employer: 'organization1' },
    { name: 'employee4', designation: 'manager', employer: 'organization1' },
    { name: 'employee5', designation: 'manager', employer: 'organization2' },
    { name: 'employee6', designation: 'manager', employer: 'organization2' },
    { name: 'employee7', designation: 'manager', employer: 'organization2' },
    { name: 'employee8', designation: 'manager', employer: 'organization3' },
    { name: 'employee9', designation: 'manager', employer: 'organization3' },
    { name: 'employee10', designation: 'manager', employer: 'organization3' },
    { name: 'employee11', designation: 'manager', employer: 'organization3' },
    { name: 'employee12', designation: 'manager', employer: 'organization3' },
    { name: 'employee13', designation: 'manager', employer: 'organization3' },
    { name: 'employee14', designation: 'manager', employer: 'organization3' },
    { name: 'employee15', designation: 'manager', employer: 'organization4' },
    { name: 'employee16', designation: 'manager', employer: 'organization4' },
    { name: 'employee17', designation: 'manager', employer: 'organization5' },
    { name: 'employee18', designation: 'manager', employer: 'organization5' },
    { name: 'employee19', designation: 'manager', employer: 'organization5' },
    { name: 'employee20', designation: 'manager', employer: 'organization5' },
    { name: 'employee21', designation: 'manager', employer: 'organization5' }
  ]

  constructor() {
  }

  ngOnInit() {

    this.orgCount1 = this.employeeOrganizationData.filter(emp => emp.employer === 'organization1').length;
    this.orgCount2 = this.employeeOrganizationData.filter(emp => emp.employer === 'organization2').length;
    this.orgCount3 = this.employeeOrganizationData.filter(emp => emp.employer === 'organization3').length;
    this.orgCount4 = this.employeeOrganizationData.filter(emp => emp.employer === 'organization4').length;
    this.orgCount5 = this.employeeOrganizationData.filter(emp => emp.employer === 'organization5').length;

    this.employeeLabel =

      this.employeeOrganizationData.map(emp => emp.employer)
        .filter((value, index, self) => self.indexOf(value) === index);

    this.employeeOrgData = {
      labels: this.employeeLabel,
      datasets: [
        {
          data: [this.orgCount1, this.orgCount2, this.orgCount3, this.orgCount4, this.orgCount5],
          backgroundColor: ['#ff0000', '#0000FF', '#FFFF00', '#FFC0CB', '#7f00ff ']
        }
      ]
    }

    this.employeeJIRAHoursData = {
      labels: ['Jan', 'Feb', 'March', 'April'],
      datasets: [
        {
          label: 'Organization1',
          backgroundColor: '#FFFF00',
          data: [44, 65, 23, 77]
        },
        {
          label: 'Organization2',
          backgroundColor: '#ff0000',
          data: [14, 65, 16, 100]
        }
      ]

    }

  }

}
Finally we will be making use of the chart component tags in the helloworld.component.html file.  
<div class="ui-g">
    <p-panel header="Empoyee Organization Chart - Pie" class=ui-g-6 ui-md-6>
        <p-chart type="pie" [data]="employeeOrgData"></p-chart>
    </p-panel>

    <p-panel header="Empoyee Organization Chart - Donut" class=ui-g-6 ui-md-6>
        <p-chart type="doughnut" [data]="employeeOrgData"></p-chart>
    </p-panel>

    <p-panel header="Empoyee Organization Chart - PolarArea" class=ui-g-6 ui-md-6>
        <p-chart type="polarArea" [data]="employeeOrgData"></p-chart>
    </p-panel>

    <p-panel header="Empoyee Organization Chart - Bar" class=ui-g-6 ui-md-6>
        <p-chart type="bar" [data]="employeeJIRAHoursData"></p-chart>
    </p-panel>

    <p-panel header="Empoyee Organization Chart - Line" class=ui-g-6 ui-md-6>
        <p-chart type="line" [data]="employeeJIRAHoursData"></p-chart>
    </p-panel>

    <p-panel header="Empoyee Organization Chart - Radar" class=ui-g-6 ui-md-6>
        <p-chart type="radar" [data]="employeeJIRAHoursData"></p-chart>
    </p-panel>
   
</div>

Downloads-

PrimeNG DataTable Component Row Edit Example