How to place a Google chart in Angular 4

Question

How do you integrate google diagram in angular 4 app?

I read the answer to the SO question here , but I think it is incomplete. Basically, I am trying to use the same strategy as the previous answer using the GoogleChartComponent and another component that extends it. Two errors occur: the first is the lack of a call to super () for the child component, and the second is the call of the "new" in this code

createBarChart(element: any): any { return new google.visualization.BarChart(element); } 

I get the error "google.visualization.BarChart is not a constructor."

I see that one comment also mentions the use of <ng-content> to project data, but this is clearly not outlined.

In an attempt to ask a “good” question, here is my GoogleChartComponent:

 export class GoogleChartComponent implements OnInit { private static googleLoaded: any; constructor() { console.log('Here is GoogleChartComponent'); } getGoogle() { return google; } ngOnInit() { console.log('ngOnInit'); if (!GoogleChartComponent.googleLoaded) { GoogleChartComponent.googleLoaded = true; google.charts.load('current', { 'packages': ['bar'] }); google.charts.setOnLoadCallback(() => this.drawGraph()); } } drawGraph() { console.log('DrawGraph base class!!!! '); } createBarChart(element: any): any { return new google.visualization.BarChart(element); } createDataTable(array: any[]): any { return google.visualization.arrayToDataTable(array); } } 

And my child component that extends it:

 @Component({ selector: 'app-bitcoin-chart', template: ` <div id="barchart_material" style="width: 700px; height: 500px;"></div> `, styles: [] }) export class BitcoinChartComponent extends GoogleChartComponent { private options; private data; private chart; // constructor() { // super(); // console.log('Bitcoin Chart Component'); // } drawGraph() { console.log('Drawing Bitcoin Graph'); this.data = this.createDataTable([ ['Price', 'Coinbase', 'Bitfinex', 'Poloniex', 'Kraken'], ['*', 1000, 400, 200, 500] ]); this.options = { chart: { title: 'Bitcoin Price', subtitle: 'Real time price data across exchanges', }, bars: 'vertical' // Required for Material Bar Charts. }; this.chart = this.createBarChart(document.getElementById('barchart_material')); this.chart.draw(this.data, this.options); } } 

Answer 1

google.visualization.BarChart is part of the 'corechart' package

need to change the boot instruction ...

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

the 'bar' package is for the material map version
which will be → google.charts.Bar

however, there are many configuration options that are not supported by material diagrams ...

for a complete list of unsupported options -> Track issue for material characteristic attribute

Answer 2

I believe the best way to integrate Google Chart into Angular 4. The ng2-google-charts library already has a GoogleChartComponent. The link to the npm page pretty well describes how to use it. The following is an example of a component:

 import {Component, ViewEncapsulation, OnInit} from '@angular/core'; import {Component, ViewEncapsulation, OnInit} from '@angular/core'; import {Component, ViewEncapsulation, OnInit} from '@angular/core'; import {ViewChild} from '@angular/core'; import {GoogleChartComponent} from 'ng2-google-charts'; // needed for advanced usage of ng2-google-charts import {HostListener} from '@angular/core'; @Component({ selector: '[your-widget]', templateUrl: './your-widget.html', encapsulation: ViewEncapsulation.None }) export class YourWidget implements OnInit { // type GoogleChartComponent and import for it can be ommited @ViewChild('your_chart') chart: GoogleChartComponent; // shows spinner while data is loading showSpinner: boolean; public chartData = { chartType: 'AnyChartType', // your type dataTable: [ ['Col1', 'Col2'] ], options: {} }; constructor() { } ngOnInit(): void { this.showSpinner = true; this.yourService.getData() .subscribe((data) => { //this.data = data; this.processYourData(); this.showSpinner = false; }); } private processYourData() { } // advanced usage of chart // in this case redraw function on window:resize event @HostListener('window:resize', ['$event']) onWindowResize(event: any) { // console.log(event.target.innerWidth); // Make sure you don't call redraw() in ngOnInit() // - chart would not be initialised by that time, and // - this would cause chart being drawn twice this.chart.redraw(); } } 

And your markup will look like this:

 <header class="widget-handle"> <h5>Widget Title</h5> <div class="widget-controls"> <a title="Refresh"> <i *ngIf="showSpinner" class="fa fa-refresh fa-spin"></i> </a> </div> </header> <div class="widget-body"> <google-chart #your_chart [data]="chartData" *ngIf="!showSpinner"> </google-chart> </div>