Angular PrimeNG Chart Example (2024) | TechGeekNext


Angular + PrimeNG Chart Example (2024)

Overview

We need data visualization because a visual summary of the information makes it easier to identify patterns and trends than to look at thousands of rows on a spreadsheet.

This is the way the human brain functions. Since the aim of data analysis is to gain insight, data is far more useful when presented.

PrimeNG supports Chart components based on Charts.js 2.7.x, an open source HTML5 based charting library.

The chart component provides a visual representation of data using charts on a web page. The chart model is based on the UIChart class name, and it can be represented with the element name as p-chart.

The chart components will work efficiently by attaching a chart model file (chart.js) to your project. It can be configured as either a CDN resource, local resource, or CLI configuration:

We will follow below steps to build this example

  1. First we will create an Angular 10 Project + PrimeNG 10 DataTable Project
  2. Various optional features available with PrimeNG DataTable pagination
  3. Setup PrimeNG Chart
  4. Implement the Example of PrimeNg DataTable pagination with sample data

Lets start

Step 1 : Create an Angular 10 Project + PrimeNG 10 Project:

The new Angular 10 version is available now. The newest release again includes improvements in performance, a smaller bundle size and many more. Moreover, the default is the Ivy renderer.

PrimeNG 10.0.0 release has also recently been available to support Angular 10 and Ivy for first class components and to improve components.

In this article, we begin exploring getting started with latest version of angular 10 and PrimeNg 10 with use of the PrimeNG Chart component with an example.

In previous tutorial we learned how to create an Angular 10 Project + PrimeNG 10 project . Now We will be modifying the example to add chart component.

Checkout our related posts :
Angular 9 features
Angular Spring Boot Example
Spring Boot - JWT Angular Example
RxJS Interview Questions
RxJS Observable
RxJS Higher-Order Observable Mapping
RxJS Tutorial
Typescript Collections

Step 2: Understand Various Charts available with PrimeNG

We will Implement below charts :

    In addition to the required features mentioned above, it also supports various optional features such as: :
  • "Line Graph" is a graph that shows information that is connected in some way (such as change over time).
  • "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.
  • "Pie Chart" is a chart to show data as Pie slices. Suppose we want to survey employees work for which organizations.
  • "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..
  • "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.

After completing the changes we can see the following output

Step 3: PrimeNG 10 Chart component Setup :

  • Start by installing Prime NG Chart package using npm and then include it in your project. using npm command below 
    • npm install chart.js --save
  • Styles Configuration
    • Open the angular.json and add the following in the styles section 
    "styles": [
             "../node_modules/chart.js/dist/Chart.js",
             //..others,
],
  • Then in your main app module, register the ChartModule to get access to its components. the PrimeNG Chart module to the 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 { MyFlightsComponent } from './my-flights/my-flights.component';
import { FlightsService } from 'src/app/service/flights.service';
import { HttpClientModule } from '@angular/common/http';
import { ChartModule } from 'primeng/chart';

@NgModule({
  declarations: [
    AppComponent,
    MyFlightsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ChartModule
  ],
  providers: [FlightsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create Dashboard Component

We will be creating Dashboard Component, Open a command prompt and use the following command-

ng generate component dashboard

Here is code for our dashboard template component

<p>
    <mat-toolbar>
        <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
        <mat-icon>menu</mat-icon>
    </button>
        <span>Angular PrimeNg Charts ( Application Usage Dashboard )</span>
        <span class="example-spacer"></span>
        <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    </button>
        <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
        <mat-icon>share</mat-icon>
    </button>
    </mat-toolbar>
</p>

<mat-grid-list cols="3" rowHeight="1:1">
    <mat-grid-tile>
        <mat-card class="example-card">
            <mat-card-header>
                <mat-card-title>Line Chart </mat-card-title>
                <mat-card-subtitle>Line Graph" is a graph that shows information that is connected in some way (such as change over time).</mat-card-subtitle>
            </mat-card-header>
            <p-chart type="line" [data]="userUsageHoursData" [options]="options"></p-chart>
        </mat-card>
    </mat-grid-tile>
    <mat-grid-tile>
        <mat-card class="example-card">
            <mat-card-header>
                <mat-card-title>Bar Chart </mat-card-title>
                <mat-card-subtitle>"Bar Graph " (also called Bar Chart) is a graphical display of data using bars of different heights.</mat-card-subtitle>
            </mat-card-header>
            <p-chart type="bar" [data]="userUsageHoursData" [options]="options"></p-chart>
        </mat-card>
    </mat-grid-tile>
    <mat-grid-tile>
        <mat-card class="example-card">
            <mat-card-header>
                <mat-card-title>Pie Chart </mat-card-title>
                <mat-card-subtitle>"Pie Chart" is a chart to show data as Pie slices. Suppose we want to survey employees work for which organizations.</mat-card-subtitle>
            </mat-card-header>
            <p-chart type="pie" [data]="userAppData" [options]="options"></p-chart>
        </mat-card>
    </mat-grid-tile>
    <mat-grid-tile>
        <mat-card class="example-card">
            <mat-card-header>
                <mat-card-title>Donut Chart </mat-card-title>
                <mat-card-subtitle>Application Usage Chart : Donut Chart is a variation on a Pie chart. In Donat chart there is a hole in the center.</mat-card-subtitle>
            </mat-card-header>
            <p-chart type="doughnut" [data]="userAppData" [options]="options"></p-chart>
        </mat-card>
    </mat-grid-tile>
    <mat-grid-tile>
        <mat-card class="example-card">
            <mat-card-header>
                <mat-card-title>PolarArea Chart </mat-card-title>
                <mat-card-subtitle>"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. </mat-card-subtitle>
            </mat-card-header>
            <p-chart type="polarArea" [data]="userAppData" [options]="options"></p-chart>
        </mat-card>
    </mat-grid-tile>
    <mat-grid-tile>
        <mat-card class="example-card">
            <mat-card-header>
                <mat-card-title>Radar Chart</mat-card-title>
                <mat-card-subtitle>Radar Chart" also called as Spider Chart, Radial Chart or Web Chart, is a graphical method of displaying multivariate data.</mat-card-subtitle>
            </mat-card-header>
            <p-chart type="radar" [data]="userUsageHoursData" [options]="options"></p-chart>
        </mat-card>
    </mat-grid-tile>

</mat-grid-list>

here is our component source 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit {
  public userAppData: any;
  public appUserCount1: any;
  public appUserCount2: any;
  public appUserCount3: any;
  public appUserCount4: any;
  public appUserCount5: any;
  public userLabel: any;
  public options: any;
  public userUsageHoursData;

  constructor() {}

  appUsageData = [
    { name: 'user1', country: 'USA', appname: 'app-1' },
    { name: 'user2', country: 'UK', appname: 'app-1' },
    { name: 'user3', country: 'Canada', appname: 'app-1' },
    { name: 'user4', country: 'Germany', appname: 'app-1' },
    { name: 'user5', country: 'Poland', appname: 'app-2' },
    { name: 'user6', country: 'USA', appname: 'app-2' },
    { name: 'user7', country: 'Canada', appname: 'app-2' },
    { name: 'user8', country: 'Germany', appname: 'app-3' },
    { name: 'user9', country: 'USA', appname: 'app-3' },
    { name: 'user10', country: 'Germany', appname: 'app-3' },
    { name: 'user11', country: 'Canada', appname: 'app-3' },
    { name: 'user12', country: 'USA', appname: 'app-3' },
    { name: 'user13', country: 'India', appname: 'app-3' },
    { name: 'user14', country: 'India', appname: 'app-3' },
    { name: 'user15', country: 'Canada', appname: 'app-4' },
    { name: 'user16', country: 'USA', appname: 'app-4' },
    { name: 'user17', country: 'India', appname: 'app-5' },
    { name: 'user18', country: 'India', appname: 'app-5' },
    { name: 'user19', country: 'Canada', appname: 'app-5' },
    { name: 'user20', country: 'USA', appname: 'app-5' },
    { name: 'user21', country: 'manager', appname: 'app-5' },
  ];

  ngOnInit() {
    this.appUserCount1 = this.appUsageData.filter(
      (app) => app.appname === 'app-1'
    ).length;
    this.appUserCount2 = this.appUsageData.filter(
      (app) => app.appname === 'app-2'
    ).length;
    this.appUserCount3 = this.appUsageData.filter(
      (app) => app.appname === 'app-3'
    ).length;
    this.appUserCount4 = this.appUsageData.filter(
      (app) => app.appname === 'app-4'
    ).length;
    this.appUserCount5 = this.appUsageData.filter(
      (app) => app.appname === 'app-5'
    ).length;

    this.userLabel = this.appUsageData
      .map((app) => app.appname)
      .filter((value, index, self) => self.indexOf(value) === index);

    this.userAppData = {
      labels: this.userLabel,
      datasets: [
        {
          data: [
            this.appUserCount1,
            this.appUserCount2,
            this.appUserCount3,
            this.appUserCount4,
            this.appUserCount5,
          ],
          backgroundColor: [
            '#ff0000',
            '#0000FF',
            '#FFFF00',
            '#FFC0CB',
            '#7f00ff ',
          ],
        },
      ],
    };

    this.userUsageHoursData = {
      labels: ['Jan', 'Feb', 'March', 'April'],
      datasets: [
        {
          label: 'app-1',
          backgroundColor: '#42A5F5',
          data: [44, 65, 23, 77],
        },
        {
          label: 'app-2',
          backgroundColor: '#ff0000',
          borderColor: '#7CB342',
          data: [14, 65, 16, 100],
        },
      ],
    };

    this.options = {
      //display labels on data elements in graph
      plugins: {
        datalabels: {
          align: 'end',
          anchor: 'end',
          borderRadius: 4,
          backgroundColor: 'teal',
          color: 'white',
          font: {
            weight: 'bold',
          },
        },
        // display chart title
        title: {
          display: true,
          fontSize: 16,
        },
        legend: {
          position: 'bottom',
        },
      },
    };
  }
}

Now If we goto localhost:4200 and we can see the following output with chart data

Download Source Code

The full source code for this article can be found on below.
Download it here - Angular PrimeNG Chart Example







Recommendation for Top Popular Post :

Spring Boot - Session Management
Spring Boot - Transaction Management
Spring Boot - Security Tutorial
Java Lombok Tutorial
PCF Tutorial
Spring Cloud Tutorial
RxJS Tutorial
Spring Boot - JWT Example
Spring Boot Complete CRUD example
Spring Boot - RabbitMQ Example
Angular Spring Boot Example
Spring Boot JPA Rest
Java Z Garbage Collector (ZGC)
Java 8 Programming Interview Questions
Angular - RxJS Interview Questions
RxJS switchMap
CI CD DevOps Interview Questions
Top Spring Batch Interview Questions
RxJS Higher-Order Observable Mapping