Usare Google Charts in Angular

Google Charts è una delle più apprezzate libreria per la creazione di grafici in Javascript.

A me non fa impazzire, ma ho dovuto usarla in un progetto Angular.

Vediamo come fare; iniziamo con l'installazione della libreria angular-google-charts:

npm install angular-google-charts

Poi nell' app-module aggiungiamo il modulo:

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

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

export class AppModule {
}

Nel nostro componente:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'Google Chart Angular';
  type = ChartType.LineChart;

  lineChartoptions = {
    tooltip: {isHtml: true},
    title: 'Google Angular',
    curveType: 'function',
    legend: {position: 'bottom'}
  };

  lineChartcolumnNames = [
    'Anni',
    'Valori',
    'Qta'
  ];

  lineChartdata = [
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]
  ];

  constructor() {
  }

  ngOnInit(): void {
  }

}

Infine l'HTML della pagina:

<google-chart
  [title]="title"
  [type]="type"
  [data]="lineChartdata"
  [columns]="lineChartcolumnNames"
  [options]="lineChartoptions"
></google-chart>

Enjoy!