DEV Community

Jameer Khan
Jameer Khan

Posted on • Updated on • Originally published at stackblogger.com

5 Best Google Charts to Use in Angular

The article is originally published to my blog: StackBlogger- 5 Best Google Charts For Angular

A chart is a graphical representation of information in the form of diagram etc. Google provides various free charts to use in applications. They are simple to use and powerful tool to plot diagrams with data. In this article we will talk about how to use some of the Google Charts in Angular application.

Angular Google Charts

Angular Google Chart is a wrapper of Google Charts project built in Angular. It is a package that can be used in the Angular application by installing it using npm.

5 Best Google Charts to use in Angular

  1. Line Chart– a chart in which information is displayed in the form of data series
  2. Pie Chart– a circle chart divided into parts to show the information
  3. Histogram Chart– it is essentially a pie chart with an area of centre cut out
  4. Gauge Chart– also called a dial chart, uses needles to show the information
  5. Combo Chart– combination of two or more lines or columns to plot information Let’s implement each charts in Angular application.

Install Google Charts in Angular
The first thing is to install the google charts library in Angular application so that you can plot various charts.

Note: I am using Angular 12 for this example.

Run the command below to install the angular google charts package:

npm install angular-google-charts
Enter fullscreen mode Exit fullscreen mode

Angular Google Chart install output

Import GoogleChartsModule

The next thing is to import GoogleChartsModule module in app.module.ts file.

import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  ...
  imports: [
    ...
    GoogleChartsModule,
    ...
  ],
  ...
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

Create Service file

app.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs";

@Injectable()
export class AppService {
    constructor(private httpClient: HttpClient) {
    }

    getChartData(): Observable<Array<Array<string | number>>> {
        return this.httpClient.get<Array<Array<string | number>>>(`http://localhost:3000/chartData`);
    }
}
Enter fullscreen mode Exit fullscreen mode

I am using json-server to create a fake JSON api.

db.json file

{
    "chartData": [
        [
            "London",
            8136000
        ],
        [
            "New York",
            8538000
        ],
        [
            "Paris",
            2244000
        ],
        [
            "Berlin",
            3470000
        ],
        [
            "Kairo",
            19500000
        ]
    ]
}
Enter fullscreen mode Exit fullscreen mode

Install and run the json server using command-

npm install -g json-server
Enter fullscreen mode Exit fullscreen mode
json-server --watch db.json
Enter fullscreen mode Exit fullscreen mode

JSON Server Fake API

Now we are ready to plot charts. Let’s plot charts one by one.

Line Chart

It’s time to plot the chart on page. I have consumed the fake json api (you can use your real api to plot).

import { Component, OnInit } from '@angular/core';
import { ChartType } from "angular-google-charts";
import { AppService } from './app.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'google-charts';
  myType = ChartType.LineChart;
  chartData: Array<Array<string | number>> = [];

  constructor(private appService: AppService) {
  }

  ngOnInit() {
    this.getChartData();
  }

  private getChartData() {
    this.appService.getChartData().subscribe(data => {
      this.chartData = data;
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

Add Template Code

Add below code in your template file. Find the Type values from here: Chart Types

<google-chart [title]="'Some Title'" [type]="myType" [data]="chartData">
</google-chart>
Enter fullscreen mode Exit fullscreen mode

Save the files and run open browser. You will notice following chart on the page.

Google Line Chart Output

Pie Chart

Change the Type in component to ChartType.PieChart

myType = ChartType.PieChart;
Enter fullscreen mode Exit fullscreen mode

Google Pie Chart Output

Histogram Chart

Change chartType to Historgram

myType = ChartType.Histogram;
Enter fullscreen mode Exit fullscreen mode

Histogram Google Chart

Gauge Chart

Change chartType to Gauge

myType = ChartType.Gauge;
Enter fullscreen mode Exit fullscreen mode

Gauge Google Chart

Combo Chart

Change chartType to ComboChart

myType = ChartType.ComboChart;
Enter fullscreen mode Exit fullscreen mode

Combo Google Chart

Note: The Combo and Line chart looks similar. The only difference is Combo charts can have multiple charts. As of now I have used only one chart in Combo. You can pass array of multiple data.

Common Errors while using Google Charts

Type '' is not assignable to type 'ChartType'.

Type ‘”Line”‘ is not assignable to type ‘ChartType’

The solution of this error is- do not provide any string chart type. Get the type value from ChartType Enum and then pass it to [type].

// import the Enum
import { ChartType } from "angular-google-charts";

// get chart type
myType = ChartType.LineChart;
Enter fullscreen mode Exit fullscreen mode

Pass the myType variable in template.

The article is originally published to my blog: StackBlogger- 5 Best Google Charts For Angular

Conclusion

The article explains about how to integrate various Google Charts in an Angular application. If you want to optimize your Angular application then I would recommend checking out this article: 5 Best Ways To Optimize Angular For Scaling

Also Read:
Real World Examples of 5 Common Observable Operators
5 Great SEO Ideas To Improve Angular Website Ranking
Angular Material 12 Table, Sorting, Searching & Pagination
RxJS forkJoin: Definition and Real World Uses

Top comments (0)