Angular

How To Create Google Charts In Angular

Introduction

 
In this article, we will learn how to create Google charts in Angular 11 in visual studio code.
 
Step 1
 
Create an Angular project setup using the below commands or however you create your Angular apps. 
 
ng new googlechart
 
How To Create Google Charts In Angular 
 
Step 2 - angular-google-charts
 
It is an open-source angular based wrapper for Google Charts to provides elegant and feature-rich Google Charts visualizations within an Angular application.
 
It can be used with Angular components.
 
Google Charts

It is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability.
 
Supported Chart Types
  • Area charts
  • Bar charts
  • Bubble charts
  • Calendar charts
  • Column charts
  • Pie charts
  • Scatter charts
  • Histogram charts
  • Tree map charts
  • Radar charts
  • TimeLines charts
  • Gauge charts
  • Line charts
  • WaterFall charts
  • Table charts
  • Donut charts
Step 3
 
Open a new terminal and run the following below commands.
 
Install Google Charts Wrapper module in Your App.
 
npm install angular-google-charts
 
How To Create Google Charts In Angular 
 
Step 4 - App.module.ts
 
Now we will declare Google chart in app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { GoogleChartsModule } from 'angular-google-charts';  
  6.   
  7. @NgModule({  
  8.   declarations: [  
  9.     AppComponent  
  10.   ],  
  11.   imports: [  
  12.     BrowserModule,  
  13.     AppRoutingModule,  
  14.     GoogleChartsModule  
  15.   ],  
  16.   providers: [],  
  17.   bootstrap: [AppComponent]  
  18. })  
  19. export class AppModule { }  
Step 5
 
Now, we will write integration on App.component.html
  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 6
 
Next, we can open the app.component.ts and write some code.
  1. import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';  
  2. import { GoogleChartComponent } from 'angular-google-charts';  
  3.   
  4. @Component({  
  5.   selector: 'app-root',  
  6.   templateUrl: './app.component.html',  
  7.   styleUrls: ['./app.component.scss']  
  8. })  
  9. export class AppComponent implements OnInit{  
  10.   title = 'googlechart';  
  11.   type = 'PieChart';  
  12.   data = [  
  13.      ['Name1', 5.0],  
  14.      ['Name2', 36.8],  
  15.      ['Name3', 42.8],  
  16.      ['Name4', 18.5],  
  17.      ['Name5', 16.2]  
  18.   ];  
  19.   columnNames = ['Name', 'Percentage'];  
  20.   options = {      
  21.   };  
  22.   width = 500;  
  23.   height = 300;  
  24.   constructor(){}  
  25.   ngOnInit() {}  
  26. }  
Step 6
 
Chart Configuration
 
Set Chart Type
 
type='PieChart';
 
Pie chart
 
It is rendered within the browser using SVG or VML.
 
Pie charts are used to draw pie based charts.
  • Basic pie chart.
  • Donut Chart.
  • 3D Pie chart.
  • Pie chart with exploded slices
column names
  1. columnNames = ['Browser', 'Percentage'];  
Options
 
Configure the other options.
  1. options = {   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true};  
is3D is false by default, so here we explicitly set it to true.
 
You can separate pie slices from the chart with the offset property of the slices option
 
Step 7
 
Now we will run the application
 
ng serve --port 1234
 
How To Create Google Charts In Angular 
 
On successful execution of the above command, it will show the browser,
 
How To Create Google Charts In Angular

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found