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 :
-
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 libraryinstall chart.js --save
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-
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]
}
]
}
}
}
<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>