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 :
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';
@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;
hoursTestData = [
{ id: 1, name: 'Rameez', designation: 'Manager', salary: 1000 },
{ id: 2, name: 'Nandu', designation: 'Engineer', salary: 20000 },
]
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' }
]
pieLabels = this.hoursTestData.map((proj) => proj.name);
pieData = this.hoursTestData.map((proj) => proj.salary);
testData = {
labels: this.pieLabels,
datasets: [
{
data: this.pieData,
backgroundColor: ['#ff0000', '#0000FF', '#FFFF00']
}
]
}
testData2 = {
labels: ['Jan', 'Feb', 'March'],
datasets: [
{
label: 'Devs Team',
backgroundColor: '#FFFF00',
data: [44, 55, 66]
},
{
label: 'Java Team',
backgroundColor: '#ff0000',
data: [14, 65, 16]
}
]
}
testData3 = {
labels: ['Jan', 'Feb', 'March'],
datasets: [
{
label: 'Devs Team',
backgroundColor: '#FFFF00',
data: [44, 55, 66],
type: 'bar'
},
{
label: 'Java Team',
backgroundColor: '#ff0000',
data: [14, 65, 16],
type: 'line'
}
]
}
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 = new Set(this.employeeOrganizationData.map((emp) => emp.employer));
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>
-
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 whole 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.
-
A 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)
You are learning facts about dogs, and each day you do a short test to see how good you are. These are the results:
-
A 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. (Source: Wikipedia)
