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.

ng new column-chart

Step 2

Open this project in Visual Studio Code.

cd column-chart
code .

 

Step 3

 

Open terminal from the Terminal tab in VS Code and install the Google Charts library in your project.

npm install angular-google-charts

 

Step 4

 

Create a component named google-column-chart.

ng g c google-column-chart

 

Step 5

Open app-module.ts and import Google Charts.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GoogleColumnChartComponent } from './google-column-chart/google-column-chart.component';

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

Step 6

Open the google-column-chart-compnent.ts file and add the below code.

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

@Component({
  selector: 'app-google-column-chart',
  templateUrl: './google-column-chart.component.html',
  styleUrls: ['./google-column-chart.component.css']
})
export class GoogleColumnChartComponent implements OnInit {

  constructor() { }

  title = 'Company Hiring Report';
  type = 'ColumnChart';
  data = [
     ["2014", 200],
     ["2015", 560],
     ["2016", 280],
     ["2017", 300],
     ["2018", 600]
  ];
  columnNames = ['Year', 'India'];
  options = {};
  width = 600;
  height = 400;

  ngOnInit() {
  }

}

Step 7

Open the google-chart-compnent.html file and add this code.

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

Step 8

Open the app-compnent.html file and add the following code.

<app-google-column-chart></app-google-column-chart>

Step 9

Run and open your project.

ng serve –open

Project Output

Grouped Column Chart

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

@Component({
  selector: 'app-google-column-chart',
  templateUrl: './google-column-chart.component.html',
  styleUrls: ['./google-column-chart.component.css']
})
export class GoogleColumnChartComponent implements OnInit {

  constructor() { }

  title = 'Company Hiring Report';
  type = 'ColumnChart';
  data = [
    ["2014", 500, 200],
    ["2015", 430, 560],
    ["2016", 600, 200],
    ["2017", 150, 400],
    ["2018", 700, 480]
  ];
  columnNames = ['Year', 'India','USA'];
  options = {};
  width = 600;
  height = 400;

  ngOnInit() {
  }

}

 

 

Stacked Column Chart

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

@Component({
  selector: 'app-google-column-chart',
  templateUrl: './google-column-chart.component.html',
  styleUrls: ['./google-column-chart.component.css']
})
export class GoogleColumnChartComponent implements OnInit {

  constructor() { }

  title = 'Company Hiring Report';
  type = 'ColumnChart';
  data = [
    ["2014", 500, 200],
    ["2015", 430, 560],
    ["2016", 600, 200],
    ["2017", 150, 400],
    ["2018", 700, 480]
  ];
  columnNames = ['Year', 'India','USA'];
  options = {
    hAxis: {
      title: 'Year'
   },
   vAxis:{
      minValue:0
   },
   isStacked:true
  };
  width = 600;
  height = 400;

  ngOnInit() {
  }

}

 

 

Negative Stacked Column

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

@Component({
  selector: 'app-google-column-chart',
  templateUrl: './google-column-chart.component.html',
  styleUrls: ['./google-column-chart.component.css']
})
export class GoogleColumnChartComponent implements OnInit {

  constructor() { }

  title = 'Company Hiring and Firing  Report';
  type = 'ColumnChart';
  data = [
    ["2014", 500, 200],
    ["2015", -90, 560],
    ["2016", 600, 150],
    ["2017", 250, -100],
    ["2018", -180, 480]
  ];
  columnNames = ['Year', 'India','USA'];
  options = {
    hAxis: {
       title: 'Year'
    },
    vAxis:{
       minValue:0
    },
    isStacked:true
 };
  width = 600;
  height = 400;

  ngOnInit() {
  }

}