Google charts in angular

In this blog, I have posted, how to install google chart in angular and sample code for a pie chart.

Why we need a chart?

Chart is a graphical representation of the user data. Mainly we using the chart in the dashboard. Normally in dashboard we have displayed the consolidated report of usage, orders, spends, and so on. If we display all the records in tabular format it will take huge space and it is not being a user friendly. So in this case we can use different types of chart. Chart not taking much space and its more colorful, so user can see and understand their data on a single page. Different types of chart there, but here I give examples of the pie chart.

If anyone wants the sample code for any other chart, please leave it in the comments section. I will post it separately

Install

npm install angular-google-charts

Import Google chart module

Import Google chart module in app.module.ts like below

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

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

Add google-chart component in your application components

<google-chart
  [title]="chart.title"
  [type]="chart.type"
  [data]="chart.data"
  [columns]="chart.columnNames"
  [options]="chart.options"
>
</google-chart>

app.component.ts

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  chart:any;

  constructor() { 
    this.chart = {
      type: 'PieChart',
      title: 'Inwards',
      data: [['NEW',30],['WORKING',30],['SHIPPED',60]],
      columnNames: ['Inward','Total'],
      options:{},
    }
  }

  ngOnInit(): void {
  }

}

Conclusion

Here we have discussed the what is the chart and why we need to add it in your application. And how to install google chart plugin in your angular application. and example of pie chart. By following the steps given in this blog you can easily implement the google chat and add a pie chart in your angular application. If you are not able to implement a google pie chart and if you have any doubts just leave it in the comments.