Angular2 + Google Charts. How to integrate Google Charts in Angular2?

Question

I want to integrate Google Charts in my Angular2 application. What is the way to do this? Is there any examples available?

I tried to load the package like Google Charts is demoed but I had problems with the loading. I tried angular2-google-chart... but did not manage to get it to work.

Thanks for your help.

Answer 1

//in index.html add
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

33.5KB loaded from google servers to your app.

now add

declare var google:any;

to your component and add your google chart code in ngOnInit.

import { Component, OnInit } from '@angular/core';
declare var google:any;

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

constructor() { 

}

ngOnInit() {

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
}

}

additional 35.8KB loaded from google servers when 'corechart' is loaded.

add this to your components html

<div id="piechart" style="width: 900px; height: 500px;"></div>

A better approach would be to use ViewChild instead of document.getElementById('piechart') in component ts file.