Ng2 Google Charts In Angular

The Code Points August 19, 2022 0

In this article, we learn about the how to use ng2-google-charts in angular. we will go into detail in how to incorporate ng2 Google Charts into our project. we will also go through some of the basics of ng2 Google Charts.

In this article, we used Angular 12 to build an Angular project. The procedures below must be followed in order to create an Angular project.

Use the following command into the Command Prompt to create a new angular project.

ng new ng2chartexample

The following instructions should be used to install the dependencies needed by ng2 for Google Charts.

npm i ng2-google-charts

Importing the Ng2GoogleChartsModule into your app.module.ts is the following process. You will be able to use all of the features offered by this Ng2 Google Charts Library as a result.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

To use Ng2 Google Charts, the following line must be added to the HTML page.

<google-chart></google-chart>

Org-Chart

Add the following code under the component.ts file.

import { Component } from '@angular/core';
import {
  GoogleChartInterface
} from 'ng2-google-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  public orgChart: GoogleChartInterface = {
    chartType: 'OrgChart',
    dataTable: [
      ['Name',   'Manager', 'Tooltip'],
      [{v: 'Gajendra', f: 'Gajendra<div style="color:red; font-style:italic">Manager</div>'}, '', 'The President'],
      [{v: 'Rohit', f: 'Rohit<div style="color:red; font-style:italic">Team Lead</div>'}, 'Gajendra', 'VP'],
      [{v:'Suchit', f: 'Suchit<div style="color:red; font-style:italic">Sr. Engineer</div>'}, 'Rohit', 'SE'],
      [{v:'Ajay', f: 'Suchit<div style="color:red; font-style:italic">Sr. Engineer</div>'}, 'Rohit', 'SE'],
      [{v:'Ishan', f: 'Ishan<div style="color:red; font-style:italic">Engineer</div>'}, 'Ajay', 'JE']
    ],
    options: {
      allowHtml: true,
      allowCollapse: true
    }
  };

}

Add the following code under the component.html file.

<google-chart  [data]="orgChart"></google-chart>

Now, run the application and see what the browser screen that looks like below.

Pie-Chart

Add the following code under the component.ts file.

import { Component } from '@angular/core';
import {
  GoogleChartInterface, GoogleChartType
} from 'ng2-google-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  public pieChart: GoogleChartInterface = {
    chartType: GoogleChartType.PieChart,
    dataTable: [
      ['Task', 'Hours per Day'],
      ['Work',     6],
      ['Lunch',      1],
      ['Stand-Up',  1],
      ['Shore-end', 1],
      ['Fun',    1]
    ],
    options: {
      allowHtml: true,
      allowCollapse: true
    }
  };

}

Add the following code under the component.html file.

<google-chart  [data]="pieChart"></google-chart>

Now, run the application and see what the browser screen that looks like below.

Line-Chart

Add the following code under the component.ts file.

import { Component } from '@angular/core';
import {
  GoogleChartInterface, GoogleChartType
} from 'ng2-google-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  public lineChart: GoogleChartInterface = {
    chartType: GoogleChartType.LineChart,
    dataTable: [
      ['Task', 'Hours per Day'],
      ['Work',     6],
      ['Lunch',      1],
      ['Stand-Up',  1],
      ['Shore-end', 1],
      ['Fun',    1]
    ],
    options: {
      allowHtml: true,
      allowCollapse: true
    }
  };

}

Add the following code under the component.html file.

<google-chart  [data]="lineChart"></google-chart>

Now, run the application and see what the browser screen that looks like below.

Column-Chart

Add the following code under the component.ts file.

import { Component } from '@angular/core';
import {
  GoogleChartInterface, GoogleChartType
} from 'ng2-google-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  public columnChart: GoogleChartInterface = {
    chartType: GoogleChartType.ColumnChart,
    dataTable: [
      ['Task', 'Hours per Day'],
      ['Work',     6],
      ['Lunch',      1],
      ['Stand-Up',  1],
      ['Shore-end', 1],
      ['Fun',    1]
    ],
    options: {
      allowHtml: true,
      allowCollapse: true
    }
  };

}

Add the following code under the component.html file.

<google-chart  [data]="columnChart"></google-chart>

Now, run the application and see what the browser screen that looks like below.

Area-Chart

Add the following code under the component.ts file.

import { Component } from '@angular/core';
import {
  GoogleChartInterface, GoogleChartType
} from 'ng2-google-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  public areaChart: GoogleChartInterface = {
    chartType: GoogleChartType.AreaChart,
    dataTable: [
      ['Task', 'Hours per Day'],
      ['Work',     6],
      ['Lunch',      1],
      ['Stand-Up',  1],
      ['Shore-end', 1],
      ['Fun',    1]
    ],
    options: {
      allowHtml: true,
      allowCollapse: true
    }
  };

}

Add the following code under the component.html file.

<google-chart  [data]="areaChart"></google-chart>

Now, run the application and see what the browser screen that looks like below.

Conclusion

In this article, we learned various types of Ng2 Google Charts with examples in Angular.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.