Google Chart In Angular

Introduction

In this article, I will explain about the use of Google Chart in Angular. I will explain how to implement a Google Chart in our project. And also, I will discuss some fundamentals of Google Chart. 

Prerequisites

• Angular 12
• HTML/Bootstrap

For this article, I have created an Angular project using Angular 12. For creating an Angular project, we need to follow the following steps.

Create Project

I have created a project using the following command in the Command Prompt.

ng new ngchartexample  

Open a project in Visual Studio Code using the following commands.

cd ngchartexample      
code .

 Installation

The next step is to install the Full Calendar-related dependencies using the following commands.

npm install angular-google-charts

Importing 

The next step is to import the GoogleChartsModule in your app.module.ts. This will allow you to use all of the features provided by this Google Chart Library.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

How to use google chart functionality

We need to add below line in HTML page to use Google Chart.

<google-chart></google-chart>

There are following attributes for google chart. Those can help us to manipulate google chart.

Type

It will help us to define the type of chart 

<google-chart [type]="CharType"></google-chart>

Data

It will help us to add data to google chart. which should be in JSON format.

<google-chart [data]="ChartData"></google-chart>

Columns

The columns property expects an array describing the columns chart data array. The number of entries must match the length of the inner array passed in the data property. Some charts don't require columns

<google-chart [columns]="chartColumns"></google-chart>

Title

Title allows us to display title. It is an optional property.

<google-chart [title]="ChartTitle"></google-chart>

Width

The width property is optional and allows to set the width of the chart

Height

The height property is optional and allows to set the height of the chart

<google-chart [width]="ChartWidth"  [height]="Chartheight"></google-chart>

The GoogleChartComponent provides some common Google Chart events.

Ready

Ready event is called when the chart had drawn something.

Error

Error event is called when an error occurs in chart.

Mouseover

The mouseover event automatic called when the mouse hovers over any element of chart 

Mouseleave

The mouseleave event automatic called when the mouse stops hovering element of chart 

<google-chart (ready)="onReady($event)"  (error)="onError($event)"  (mouseover)="OnMouseOver($event)" (mouseleave)="onMouseLeave($event)"></google-chart>

Example

Open app.component.html and paste following code.

<div>
  <google-chart
    [title]="title"
    [type]="type"
    [data]="pieChartData"
    [columns]="pieChartColumns"
    [options]="options"
    (select)="onSelect($event)"
  ></google-chart>

  <google-chart
    [title]="title"
    [type]="type1"
    [data]="columnsChartdata"
    [columns]="columnsChartdatacolumn"
    [options]="columnsChartoptions"
    (select)="onSelect($event)"
  ></google-chart>

  <google-chart
    [type]="type2"
    [data]="lineChartdata"
    [columns]="lineChartcolumnNames"
    [options]="lineChartoptions"
    (select)="onSelect($event)"
  ></google-chart>
</div>

Open app.component.ts and paste following code.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Google Chart Example';
  type = 'PieChart';
  type1 = 'LineChart';
  type2 = 'ColumnChart';

  // column chart

  columnsChartdata = [
    ['other', 16, 'color: rgb(143, 27, 0)', '$6'],
    ['Architect', 3, 'color: rgb(143, 27, 0)', 3],
    ['Business', 2, 'color: rgb(143, 27, 0)', 2],
    ['Project', 5, 'color: rgb(143, 27, 0)', 4],
    ['developer', 9, 'color: rgb(143, 27, 0)', 4],
  ];
  columnsChartdatacolumn = [
    'Year',
    'value',
    { role: 'style' },
    { role: 'annotation' },
  ];
  columnsChartoptions = {
    title: '', 
    tooltip: { 
      textStyle: { color: 'blue', fontName: 'Tahoma', fontSize: '15' },
    }, 
    labels: 'none',
    pieSliceText: 'none',
    pieSliceTextStyle: { color: 'red', fontSize: 9, display: 'none' },
    slices: [
      { color: '3eafe0' },
      { color: 'bd6a67' },
      { color: 'b9b262' },
      { color: '6abf7e' },
      { color: '6c95b7' },
    ],
    is3D: false  ,
    fontSize: 9,
    legend: 'dsd',
  };

  // column chart
  pieChartColumns = [
    'Year',
    'value',
    { role: 'style' },
    { role: 'annotation' },
  ];
  pieChartData = [
    ['other', { v: 2, f: '$12,345' }, 'color: rgb(143, 27, 0)', '$6'],
    ['Architect', { v: 6, f: '$12,345' }, 'color: rgb(143, 27, 0)', '$6'],
    ['Business', { v: 3, f: '$12,345' }, 'color: rgb(143, 27, 0)', '$6'],
    ['Project', { v: 8, f: '$12,345' }, 'color: rgb(143, 27, 0)', '$6'],
    ['developer', { v: 9, f: '$12,345' }, 'color: rgb(143, 27, 0)', '$6'],
  ];

  // Line Chart
  lineChartoptions = {
    tooltip: { isHtml: true },
    legend: 'none',
  };
  lineChartcolumnNames = [
    'Year',
    'value',
    { role: 'style' },
    { role: 'annotation' },
    { type: 'string', role: 'tooltip', p: { html: true } },
  ];
  lineChartdata = [
    ['other', 5, 'color: rgb(143, 27, 0)', '6K', 'Other <br/> $ 6'],
    ['Architect', 7, 'color: rgb(143, 27, 0)', '$6', '1221212 <br/> $ 6'],
    ['Business', 12, 'color: rgb(143, 27, 0)', '$6', '1221212 <br/> $ 6'],
    ['Project', 10, 'color: rgb(143, 27, 0)', '$6', '1221212 <br/> $ 6'],
    ['developer', 8, 'color: rgb(143, 27, 0)', '$6', '1221212 <br/> $ 6'],
  ];
}

Open app.component.css and paste following code.

.google-visualization-tooltip {
  width: 1510px !important;
  border: none !important;
  border-radius: 21px !important;
  background-color: rgb(30, 50, 230) !important;
  position: absolute !important;
  box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75) !important;
  background: -moz-linear-gradient(
    30deg,
    rgb(30, 50, 230) 30%,
    rgb(90, 140, 250) 70%
  ) !important;
  background: -webkit-linear-gradient(
    30deg,
    rgb(30, 50, 230) 30%,
    rgb(90, 140, 250) 70%
  ) !important;
  background: -o-linear-gradient(
    30deg,
    rgb(30, 50, 230) 30%,
    rgb(90, 140, 250) 70%
  ) !important;
  background: -ms-linear-gradient(
    30deg,
    rgb(30, 50, 230) 30%,
    rgb(90, 140, 250) 70%
  ) !important;
  background: linear-gradient(
    120deg,
    rgb(30, 50, 230) 30%,
    rgb(90, 140, 250) 70%
  ) !important;
  font-size: 10px !important;
}

Let's start the project using the following command:

ng serve

Summary

In this article, I have discussed various features of Google Chart with example in Angular.