Introduction

This blog will explain how to implement Google Combo Chart with the Angular 2+ version. I have used Angular version 7 here. NPM provides Google Charts, an open source library which is based on JavaScript. Google Charts is a graphical visualization which represents your data in the chart format.

Here are the steps to be followed in order to implement Google Combo Charts with Angular.

Step 1

Create a new project using Angular CLI. Open the command prompt and execute the following command.
  1. ng new Combo-Chart
Google Combo Chart In Angular 7

Step 2

Open the project in Visual Studio Code.
  1. cd Combo-Chart
  2. code .
Google Combo Chart In Angular 7
Step 3
Open terminal from the Terminal tab in Visual Studio Code and install Google Charts library in your project.
  1. npm install angular-google-charts
Google Combo Chart In Angular 7

Step 4

Create a google-combo-column-chart component.
  1. ng g c google-combo-chart
Google Combo Chart In Angular 7

Step 5

Open the 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 { GoogleComboChartComponent } from './google-combo-chart/google-combo-chart.component';
  9. @NgModule({
  10. declarations: [
  11. AppComponent,
  12. GoogleComboChartComponent
  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-combo-chart-compnent.ts file and add the below code.
  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4. selector: 'app-google-combo-chart',
  5. templateUrl: './google-combo-chart.component.html',
  6. styleUrls: ['./google-combo-chart.component.css']
  7. })
  8. export class GoogleComboChartComponent implements OnInit {
  10. constructor() { }
  12. title = 'Company Hiring Report';
  13. type = 'ComboChart';
  14. data = [
  15. ["Account", 3, 2, 2.5],
  16. ["HR",2, 3, 2.5],
  17. ["IT", 1, 5, 3],
  18. ["Sales", 3, 9, 6],
  19. ["Marketing", 4, 2, 3]
  20. ];
  21. columnNames = ['Loaction','India','US','Average'];
  22. options = {
  23. hAxis: {
  24. title: 'Department'
  25. },
  26. vAxis:{
  27. title: 'Employee hired'
  28. },
  29. seriesType: 'bars',
  30. series: {2: {type: 'line'}}
  31. };
  32. width = 600;
  33. height = 400;
  35. ngOnInit() {
  36. }
  38. }
Step 7
Open the google-combo-chart-compnent.html file and add the following 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 below code.
  1. <app-google-combo-chart></app-google-combo-chart>

Step 9

Run and open your project.
  1. ng serve –open
Google Combo Chart In Angular 7
Project Output
Google Combo Chart In Angular 7