Different Ways Of Implementing Google Column Chart In Angular 7

This blog will explain how to implement Google Charts in Angular 2+ versions. I have implemented it with Angular 7.

I have implemented Google Charts with the Angular 7 version. NPM provides a Google Charts library which is based on JavaScript. It is an open source library to use for your web applications. Google Charts is a graphical visualization to represent your data in the chart format.

Implementing Google Charts with Angular 7

 
Here are the steps to be followed. 

Step 1

Create a new project using Angular CLI. Open the command prompt and type the following command.
  1. ng new column-chart   
Different Way Of Implementing Google Column Chart In Angular 7

Step 2

Open this project in Visual Studio Code.
  1. cd column-chart  
  2. code .  
Different Way Of Implementing Google Column Chart In Angular 7
 
Step 3
 
Open terminal from the Terminal tab in VS Code and install the Google Charts library in your project.
  1. npm install angular-google-charts   
Different Way Of Implementing Google Column Chart In Angular 7
 
Step 4
 
Create a component named google-column-chart.
  1. ng g c google-column-chart  
Different Way Of Implementing Google Column Chart In Angular 7 

Step 5

Open app-module.ts and import Google Charts.
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { GoogleChartsModule } from 'angular-google-charts';  
  4.   
  5. import { AppRoutingModule } from './app-routing.module';  
  6. import { AppComponent } from './app.component';  
  7. import { GoogleColumnChartComponent } from './google-column-chart/google-column-chart.component';  
  8.   
  9. @NgModule({  
  10.   declarations: [  
  11.     AppComponent,  
  12.     GoogleColumnChartComponent  
  13.   ],  
  14.   imports: [  
  15.     BrowserModule,  
  16.     AppRoutingModule,  
  17.     GoogleChartsModule  
  18.   ],  
  19.   providers: [],  
  20.   bootstrap: [AppComponent]  
  21. })  
  22. export class AppModule { }  

Step 6

Open the google-column-chart-compnent.ts file and add the below code.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-google-column-chart',  
  5.   templateUrl: './google-column-chart.component.html',  
  6.   styleUrls: ['./google-column-chart.component.css']  
  7. })  
  8. export class GoogleColumnChartComponent implements OnInit {  
  9.   
  10.   constructor() { }  
  11.   
  12.   title = 'Company Hiring Report';  
  13.   type = 'ColumnChart';  
  14.   data = [  
  15.      ["2014", 200],  
  16.      ["2015", 560],  
  17.      ["2016", 280],  
  18.      ["2017", 300],  
  19.      ["2018", 600]  
  20.   ];  
  21.   columnNames = ['Year''India'];  
  22.   options = {};  
  23.   width = 600;  
  24.   height = 400;  
  25.   
  26.   ngOnInit() {  
  27.   }  
  28.   
  29. }  

Step 7

Open the google-chart-compnent.html file and add this code.
  1. <google-chart #chart  
  2.    [title]="title"  
  3.    [type]="type"  
  4.    [data]="data"  
  5.    [columnNames]="columnNames"  
  6.    [options]="options"  
  7.    [width]="width"  
  8.    [height]="height">  
  9. </google-chart>  

Step 8

Open the app-compnent.html file and add the following code.
  1. <app-google-column-chart></app-google-column-chart>  

Step 9

Run and open your project.

ng serve –open

Different Way Of Implementing Google Column Chart In Angular 7

Project Output

Different Way Of Implementing Google Column Chart In Angular 7

Grouped Column Chart

  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-google-column-chart',  
  5.   templateUrl: './google-column-chart.component.html',  
  6.   styleUrls: ['./google-column-chart.component.css']  
  7. })  
  8. export class GoogleColumnChartComponent implements OnInit {  
  9.   
  10.   constructor() { }  
  11.   
  12.   title = 'Company Hiring Report';  
  13.   type = 'ColumnChart';  
  14.   data = [  
  15.     ["2014", 500, 200],  
  16.     ["2015", 430, 560],  
  17.     ["2016", 600, 200],  
  18.     ["2017", 150, 400],  
  19.     ["2018", 700, 480]  
  20.   ];  
  21.   columnNames = ['Year''India','USA'];  
  22.   options = {};  
  23.   width = 600;  
  24.   height = 400;  
  25.   
  26.   ngOnInit() {  
  27.   }  
  28.   
  29. }  
 Different Way Of Implementing Google Column Chart In Angular 7
 
Stacked Column Chart
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-google-column-chart',  
  5.   templateUrl: './google-column-chart.component.html',  
  6.   styleUrls: ['./google-column-chart.component.css']  
  7. })  
  8. export class GoogleColumnChartComponent implements OnInit {  
  9.   
  10.   constructor() { }  
  11.   
  12.   title = 'Company Hiring Report';  
  13.   type = 'ColumnChart';  
  14.   data = [  
  15.     ["2014", 500, 200],  
  16.     ["2015", 430, 560],  
  17.     ["2016", 600, 200],  
  18.     ["2017", 150, 400],  
  19.     ["2018", 700, 480]  
  20.   ];  
  21.   columnNames = ['Year''India','USA'];  
  22.   options = {  
  23.     hAxis: {  
  24.       title: 'Year'  
  25.    },  
  26.    vAxis:{  
  27.       minValue:0  
  28.    },  
  29.    isStacked:true  
  30.   };  
  31.   width = 600;  
  32.   height = 400;  
  33.   
  34.   ngOnInit() {  
  35.   }  
  36.   
  37. }  
 Different Way Of Implementing Google Column Chart In Angular 7
 
Negative Stacked Column
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-google-column-chart',  
  5.   templateUrl: './google-column-chart.component.html',  
  6.   styleUrls: ['./google-column-chart.component.css']  
  7. })  
  8. export class GoogleColumnChartComponent implements OnInit {  
  9.   
  10.   constructor() { }  
  11.   
  12.   title = 'Company Hiring and Firing  Report';  
  13.   type = 'ColumnChart';  
  14.   data = [  
  15.     ["2014", 500, 200],  
  16.     ["2015", -90, 560],  
  17.     ["2016", 600, 150],  
  18.     ["2017", 250, -100],  
  19.     ["2018", -180, 480]  
  20.   ];  
  21.   columnNames = ['Year''India','USA'];  
  22.   options = {     
  23.     hAxis: {  
  24.        title: 'Year'  
  25.     },  
  26.     vAxis:{  
  27.        minValue:0  
  28.     },  
  29.     isStacked:true      
  30.  };  
  31.   width = 600;  
  32.   height = 400;  
  33.   
  34.   ngOnInit() {  
  35.   }  
  36.   
  37. }  
Different Way Of Implementing Google Column Chart In Angular 7