I'd like to use Google Charts in my app and there is angular-google-charts module. When I want to display a chart following the documentation I get the following error:
ERROR ReferenceError: google is not defined
The error above points to this line where google.visualization.arrayToDataTable
What I did so far to get over this issue:
- googled for it, but AngularJS related issues are mentioned
- project GitHub page whether there is an error report, but I haven't found anything
Please find the code below:
Main module:
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
GoogleChartsModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Module where to the component belongs
@NgModule({
declarations: [
// ...
],
imports: [
GoogleChartsModule
],
exports: [
]
})
export class ContentModule {
}
Component file:
export class VersionDistributionComponent implements OnInit {
data: any;
chartType = 'SteppedAreaChart';
chartData: google.visualization.DataTable;
columnNames: Array<string>;
constructor(
private router: Router
) {
this.chartData = google.visualization.arrayToDataTable([]);
}
ngOnInit() {
}
}
Templatefile:
<p-tabPanel header="Distribution by time">
<google-chart [type]="chartType"
[data]="chartData"
[columnNames]="columnNames"></google-chart>
</p-tabPanel>