angular and google chart

import { Component} from '@angular/core';
import { GoogleChartComponent} from '../chart/googlechart.component';

@Component({
    selector: 'app-chart',
    template: '
   <div id="barchart_material" style="width: 700px; height: 500px;"></div>
  ',
    styles: []
})
export class ChartComponent  extends GoogleChartComponent {
    private options: any;
    private data: any;
    private chart: any;
     //constructor() {
     //  //super();
     //  console.log('');
     //}
    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);
    }
}

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

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': ['corechart']
            });
            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);
    }
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent }  from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import {ChartComponent } from './chart/report.component';
import {PageNotFoundComponent} from './not-found/PageNotFoundComponent'
import {AutorizacionService} from './services/authentication.service';
import {SignalRService} from './services/signalr.service';
import {AuthGuard} from './guard/guard.service';


const appRoutes: Routes = [
    { path: '', component: LoginComponent },
    //{ path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'login', component: ReportComponent },
    { path: 'home', component: HomeComponent }, //canActivate: [AuthGuard]  }
    { path: '**', component: PageNotFoundComponent },
    { path: 'report', component: ChartComponent },


];

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(appRoutes)
    ],
    providers: [AutorizacionService, AuthGuard, SignalRService],
    declarations: [
        AppComponent,
        LoginComponent,
        HomeComponent,
        PageNotFoundComponent,
        ChartComponent 
        
    ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
    constructor() {
        console.log('appmodule')
    }
}