Different Ways Of Implementing Google Column Chart In 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

Step 1

Step 2

Open this project in Visual Studio Code.

1. cd column-chart
2. code .

1. npm install angular-google-charts

1. ng g c google-column-chart

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';
5. import { AppRoutingModule } from './app-routing.module';
6. import { AppComponent } from './app.component';
7. import { GoogleColumnChartComponent } from './google-column-chart/google-column-chart.component';
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';
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 {
10. constructor() { }
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;
26. ngOnInit() {
27. }
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

1. import { Component, OnInit } from '@angular/core';
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 {
10. constructor() { }
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;
34. ngOnInit() {
35. }
37. }